html - 一个 anchor 中的多种下划线颜色

Question

我想，在一个 anchor 内</a> , 有两种不同的下划线颜色。像这样:

<a href="somehref">
    <span>This text should underline RED on `a` hover</span>
    <span>This text should underline GREY on `a` hover</span>
</a>

我可以添加text-decoration到悬停时的每个跨度，但这会导致每条线单独悬停。我想要它，以便当我将鼠标悬停在 </a> 中的任何位置时两个 span 的字体都带有下划线 color继承。

这可能吗？

注意:我知道 text-decoration-color但由于支持有限，我无法使用它。

Answer 1

是这样的吗？您可以使用 anchor 的 :hover CSS 伪类来设置其子项和后代的样式。

这是对 CSS 的引用 child和 descendant选择器。

a {
  color: black;
  text-decoration: none;
}
a span:first-child {
  color: red;
}
a span:last-child {
  color: grey;
}
a:hover span {
  text-decoration: underline;
}

<a href="somehref">
  <span>This text should underline RED on `a` hover</span>
  <span>This text should underline GREY on `a` hover</span>
</a>