停止链接的 :before 内容被应用于链接的规则加下划线 [英] Stop link's :before content from being underlined by rule applied to the link
问题描述
我有一个文本链接,当悬停时它带有下划线.我正在使用以下代码在链接的开头添加 >
符号:
.box.blueb a { 颜色:#0098aa;}.box.blueb a:hover { 文字装饰:下划线;}.box.blueb a:before { content: "> ";}.box.blueb a:before:hover { 文字装饰:无;}
但是当链接悬停时,我不希望 >
符号带有下划线.我如何实现这一目标?
http://jsfiddle.net/thirtydot/LmvgM/1/
您需要在 a
中的文本周围包裹一个 span
:
<a href="#"><span>你好</span></a>
然后将您的 CSS 更改为:
.box.blueb a { 颜色:#0098aa;文字装饰:无;}.box.blueb a:hover >span { 文字装饰:下划线;}.box.blueb a:before { content: "> ";}
.box.blueb a:before:hover { text-decoration: none;}
不起作用,因为当您在元素(a
)上设置 text-decoration: underline
时,你不能在后代上删除它(:before代码>).
I have a text link that is underlined when hovered. I'm adding at the beginning of the link a >
symbol using the following code:
.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; }
But what I don't want the >
symbol underlined when the link is hovered. How do I achieve this?
http://jsfiddle.net/thirtydot/LmvgM/1/
You need to wrap a span
around the text inside the a
:
<div class="box blueb">
<a href="#"><span>Hello</span></a>
</div>
And then change your CSS to this:
.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 { text-decoration: none; }
doesn't work because when you set text-decoration: underline
on an element (the a
), you can't then remove it on a descendant (:before
).
这篇关于停止链接的 :before 内容被应用于链接的规则加下划线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!