我有一组带样式的链接,使用:before
来应用箭头。
它在所有浏览器中看起来都很好,但当我将下划线应用于链接时,我不希望在:before
部件(箭头)上有下划线。
参见jsfiddle示例:http://jsfiddle.net/r42e5/1/
有没有可能去掉这个?我和#test p a:hover:before
坐在一起的测试风格确实得到了应用(根据Firebug),但下划线仍然存在。
有什么方法可以避免这种情况吗?
#test {
color: #B2B2B2;
}
#test p a {
color: #B2B2B2;
text-decoration: none;
}
#test p a:hover {
text-decoration: underline;
}
#test p a:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
#test p a:hover:before {
text-decoration: none;
}
<div id="test">
<p><a href="#">A link</a></p>
<p><a href="#">Another link</a></p>
</div>
发布于 2012-01-11 21:47:12
将链接放在跨度中,并将文本装饰添加到a:hover上的跨度,如下所示,
a:hover span {
text-decoration:underline;
}
我已经将你的小提琴更新到我认为你想要做的事情。http://jsfiddle.net/r42e5/4/
发布于 2012-01-11 21:48:51
试着改用:
#test p:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
这样行吗?
发布于 2012-01-11 21:55:40
使用这个
#test p:before {
color: #B2B2B2;
content: "► ";
}
https://stackoverflow.com/questions/8820286
复制相似问题