blocks|key|487509|text|http://jsfiddle.net/thirtydot/LmvgM/1/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|487510|您需要在a内的文本两边加上一个span|style|CODE|487511|<div+class="box+blueb">
++++<a+href="#">Hello</a>
</div>|code-block|syntax|javascript|487512|然后将您的CSS更改为：|487513|.box.blueb+a+{+color:+#0098aa;+text-decoration:+none;+}
.box.blueb+a:hover+>+span+{+text-decoration:+underline;+}
.box.blueb+a:before+{+content:+">+";+}|487514|.box.blueb+a:before:hover+{+text-decoration:+none;+}不起作用，因为当您在一个元素(+a)上设置text-decoration:+underline时，在一个子元素(:before)上设置you+can't+then+remove+it。|487515|entityMap|0|LINK|mutability|MUTABLE|url|1|https://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-ancestor-element^0|0|12|0|0|4|1|F|4|0|0|0|0|0|1G|1W|1|21|Q|30|7|3B|O|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@$A|16|B|17|F|G]|$A|18|B|19|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$A|1E|B|1F|F|G]|$A|1G|B|1H|F|G]|$A|1I|B|1J|F|G]|$A|1K|B|1L|F|G]]|9|@$A|1M|B|1N|1|1O]]|C|$]]|$1|S|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|4]]|Z|$5|V|W|X|C|$Y|10]]]]

<a href="http://jsfiddle.net/thirtydot/LmvgM/1/" rel="nofollow noreferrer">http://jsfiddle.net/thirtydot/LmvgM/1/</a>

You need to wrap a <code>span</code> around the text inside the <code>a</code>:

<pre><code>&lt;div class="box blueb"&gt;
 &lt;a href="#"&gt;&lt;span&gt;Hello&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

And then change your CSS to this:

<pre><code>.box.blueb a { color: #0098aa; text-decoration: none; }
.box.blueb a:hover &gt; span { text-decoration: underline; }
.box.blueb a:before { content: "&gt; "; }
</code></pre>

<code>.box.blueb a:before:hover { text-decoration: none; }</code> doesn't work because when you set <code>text-decoration: underline</code> on an element (the <code>a</code>), <a href="https://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-ancestor-element">you can't then remove it</a> on a descendant (<code>:before</code>).

blocks|key|703310|text|http://jsfiddle.net/LmvgM/8/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|703311|它可以只用css实现，而不需要额外的html标记，通过设置position:相对于链接，以及分别在内容之前设置position:absolute+to：。|703312|使用这个例子...|703313|<div+class="box+blueb">
++++<a+href="#">Hello</a>
</div>|code-block|syntax|javascript|703314|..。css将如下所示：|703315|.box.blueb+a+{+
++++color:+#0098aa;+
++++position:+relative;
++++margin-left:+5px;
++++padding-left:+10px;
++++text-decoration:+none;
}

.box.blueb+a:before+{+
++++content:+">+";+
++++position:+absolute;
++++top:+0;
++++left:+0;
}

.box.blueb+a:hover+{
++++text-decoration:+underline;
}|703316|entityMap|0|LINK|mutability|MUTABLE|url^0|0|S|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|4]]]]

<a href="http://jsfiddle.net/LmvgM/8/" rel="noreferrer">http://jsfiddle.net/LmvgM/8/</a>

It can be achieved with css only, without additional html markup by setting position:relative to the link, and respectively position:absolute to :before content.

Using this example...

<pre><code>&lt;div class="box blueb"&gt;
 &lt;a href="#"&gt;Hello&lt;/a&gt;
&lt;/div&gt;
</code></pre>

... the css will look like this: 

<pre><code>.box.blueb a { 
 color: #0098aa; 
 position: relative;
 margin-left: 5px;
 padding-left: 10px;
 text-decoration: none;
}

.box.blueb a:before { 
 content: "&gt; "; 
 position: absolute;
 top: 0;
 left: 0;
}

.box.blueb a:hover {
 text-decoration: underline;
}
</code></pre>

blocks|key|487665|text|这个问题在:hover:before+text-decoration+none+has+no+effects?上也被问到了，answer+https://stackoverflow.com/a/13376725/261747在IE中也适用于我。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|487666|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/11474780/261747|1|https://stackoverflow.com/a/13376725/261747^0|5|1E|0|1X|17|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

This question was also asked at <a href="https://stackoverflow.com/q/11474780/261747">:hover:before text-decoration none has no effects?</a> and answer <a href="https://stackoverflow.com/a/13376725/261747">https://stackoverflow.com/a/13376725/261747</a> worked for me in IE too.

blocks|key|487711|text|如果您想要一个只有CSS的解决方案，请尝试此方法。为了让它在IE中工作，你需要在关闭伪元素之前显式地打开它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|487712|a+{text-decoration:none;}
a:hover+{text-decoration:underline;}
a:before+{+text-decoration:underline;}
a:before,
a:hover:before+{text-decoration:none;}|code-block|syntax|javascript|487713|因此，在您的示例中，您需要将其编写为：|487714|.box.blueb+a+{+text-decoration:none;+}
.box.blueb+a:hover+{+text-decoration:+underline;+}
.box.blueb+a:before+{+text-decoration:+underline;+}
.box.blueb+a:before,
.box.blueb+a:before:hover+{+text-decoration:+none;+}|487715|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Try this if you want a CSS only solution.
For it to work in IE, you need to explicitly turn it on before you turn it off for the pseudo elements:

<pre><code>a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before { text-decoration:underline;}
a:before,
a:hover:before {text-decoration:none;}
</code></pre>

So in your example you would need it to be written:

<pre><code>.box.blueb a { text-decoration:none; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { text-decoration: underline; }
.box.blueb a:before,
.box.blueb a:before:hover { text-decoration: none; }
</code></pre>

I have a text link that is underlined when hovered. I'm adding at the beginning of the link a <code>&gt;</code> symbol using the following code:

<pre><code>.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "&gt; "; }
.box.blueb a:before:hover { text-decoration: none; }
</code></pre>

But what I don't want the <code>&gt;</code> symbol underlined when the link is hovered. How do I achieve this?

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

问停止链接的:在应用于链接的规则为内容添加下划线之前
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问停止链接的:在应用于链接的规则为内容添加下划线之前EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问停止链接的:在应用于链接的规则为内容添加下划线之前
EN