停止链接的:在应用于链接的规则为内容添加下划线之前
停止链接的:在应用于链接的规则为内容添加下划线之前
提问于 2011-12-16 23:06:03
我有一个文本链接，悬停时会加下划线。我使用以下代码在链接的开头添加了一个>符号：
.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; }但是当链接悬停时，我不希望>符号被突出显示。我该如何实现这一点？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-12-16 23:18:24
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 { text-decoration: none; }不起作用，因为当您在一个元素( a)上设置text-decoration: underline时，在一个子元素(:before)上设置you can't then remove it。
Stack Overflow用户
发布于 2013-03-27 21:26:59
它可以只用css实现，而不需要额外的html标记，通过设置position:相对于链接，以及分别在内容之前设置position:absolute to：。
使用这个例子...
<div class="box blueb">
<a href="#">Hello</a>
</div>..。css将如下所示：
.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;
}Stack Overflow用户
发布于 2015-07-10 08:14:33
如果您想要一个只有CSS的解决方案，请尝试此方法。为了让它在IE中工作，你需要在关闭伪元素之前显式地打开它：
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before { text-decoration:underline;}
a:before,
a:hover:before {text-decoration:none;}因此，在您的示例中，您需要将其编写为：
.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; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8536015
复制相关文章
相似问题