一个锚点中的多种下划线颜色 [英] Multiple underline colors in one anchor

问题描述

我希望在一个锚点 </a> 内有两种不同的下划线颜色.像这样:

I would like to, within one anchor </a>, have two different underline colors. Like so:

<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 继承了.

I can add text-decoration to each span on hover but this causes each line to hover individually. I want it so that when I hover over anywhere in the </a> both spans underline with their font color inherited.

这可能吗?

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

Note: I'm aware of text-decoration-color but due to limit support I cannot use it.

推荐答案

类似这样的事情?您可以使用锚点的 :hover CSS 伪类来设置其子项和后代的样式.

Some thing like this? You can use the anchor's :hover CSS pseudo class to style it's child and descendant.

这里引用了 CSS child 和 后代 选择器.

Here is an reference to CSS child and descendant selectors.

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>

这篇关于一个锚点中的多种下划线颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！