html - 从href继承hover样式在href中停止span

Question

问题

我需要跨度没有text-decoration: underline。无论如何我都无法更改标记。这可能吗？

标记

<a href="#">
    Working test
    <span>▼&lt;/span>
</a>

CSS

a:hover {
    text-decoration: underline;
}

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

Answer 1

试试这个jsFiddle 示例。适用于所有现代浏览器和 IE8+。

a {
    text-decoration:none;
    position:relative;
    padding-right:16px;
}
a:hover {
    text-decoration: underline;
}
span {
    text-decoration: none;
    position:absolute;
    right:0;
}

Answer 2

恐怕不是。

您将遇到的问题是父元素（锚点<a>）将在跨度所在的任何位置都有下划线，因为它位于在 CSS 中设置了下划线的锚点内。如果您可以更改标记，则可以使用如下所示的内容，它将下划线仅应用于您想要下划线的锚部分（包裹在跨度中）。

<a href="#"><span class="nounderline">No</span> <span class="underline">Underline</span></a>

a {
  text-decoration: none;
}
span.underline {
  text-decoration: underline;
}

但正如你目前的标记一样，没有办法做到这一点。