css - 停止链接的 :before content from being underlined by rule applied to the link

Question

我有一个文本链接，悬停时带有下划线。我使用以下代码在链接的开头添加了一个 > 符号:

.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; }
.box.blueb a:before:hover { text-decoration: none; }

但我不希望 > 符号在悬停时带有下划线。我如何实现这一点？

Answer 1

http://jsfiddle.net/thirtydot/LmvgM/1/

您需要在 a 中的文本周围包裹一个 span:

<div class="box blueb">
    <a href="#"><span>Hello</span></a>
</div>

然后将您的 CSS 更改为:

.box.blueb a { color: #0098aa; text-decoration: none; }
.box.blueb a:hover > span { text-decoration: underline; }
.box.blueb a:before { content: "> "; }

.box.blueb a:before:hover { 文本装饰:无； } 不起作用，因为当您在元素(a)上设置 text-decoration: underline 时，you can't then remove it在后代上(:before)。