停止href内部的span从href继承悬停样式

Question

问题

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

标记

<a href="#">
    Working test
    <span>▼</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;
}

但就目前的标记而言，没有办法做到这一点。