我希望在一个锚< / 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>
我可以在悬停的每个跨度上添加文本装饰，但这会导致每行单独悬停。我想要它，所以当我将鼠标悬停在< / a>两个跨度下划线与他们的字体颜色继承。
这可能吗？
注意：我知道文本装饰颜色，但由于限制支持，我无法使用它。
解决方法
有些事情这样吗？你可以使用锚点：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>
