一个锚中有多个下划线颜色

Question

我想在一个锚</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>两个跨度的任何地方时,下划线并color继承其字体.

这可能吗？

注意:我知道text-decoration-color但由于限制支持,我无法使用它.

Answer 1

有点像这样吗？您可以使用锚点的:hoverCSS伪类来设置它的子和后代的样式.

这是对CSS 子级和后代选择器的引用.

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>

Answer 2

你试过这个吗？

a:hover span {
   text-decoration: underline; }

text-decoration: underline 将自动继承字体颜色,因此如果你的跨度已经是灰色/红色,你需要做的就是在悬停时使它们下划线 a

Answer 3

你也可以试试这个.如果有这么多span元素

a{
  text-decoration:none;
}
a:hover span:nth-child(1){
  border-bottom:1px solid red;
}
a:hover span:nth-child(2){
  border-bottom:1px solid grey;
}

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