停止链接：在应用于链接的规则下划线的内容之前 [英] Stop link's :before content from being underlined by rule applied to the link

问题描述

我有一个文字链接，当徘徊时下划线。我使用以下代码在链接开头添加> 符号：

  .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; } 
  

但我不想让> 符号下划线时链接被悬停。如何实现这一目标？

解决方案

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

您需要包装 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 {text-decoration：没有; } 不工作，因为在元素上设置 text-decoration：underline （ a ），您无法删除它（：之前）。

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).

这篇关于停止链接：在应用于链接的规则下划线的内容之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！