Opt*_*ime 89 html css hyperlink text-decorations pseudo-element
我有一组使用: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>Phr*_*ogz 161
可以删除吗？
是的,如果您将内联元素的显示样式从display:inline(默认)更改为display:inline-block:
#test p a:before {
color: #B2B2B2;
content: "? ";
display:inline-block;
}
这是因为CSS规范说:
当在内联元素上指定或传播到内联元素时,它会影响该元素生成的所有框,并进一步传播到拆分内联的任何流内块级框(参见第9.2.1.1节).[...]对于所有其他元素,它会传播给任何流入的孩子.请注意,文本修饰不会传播到浮动和绝对定位的后代,也不会传播到原子内联级后代(如内联块和内联表)的内容.
(强调我的.)
感谢@Oriol提供的解决方法,促使我检查规格并看到解决方法是合法的.
LeJ*_*red 52
IE8-11中有一个Bug,因此display:inline-block;单独使用将无法在那里工作.
我已经找到了这个bug的解决方案,通过显式设置text-decoration:underline;:before-content然后再次覆盖此规则text-decoration:none;
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}
这里的工作示例:http: //jsfiddle.net/95C2M/
更新:由于jsfiddle不再适用于IE8,只需将这个简单的演示代码粘贴到本地html文件中并在IE8中打开它:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}
</style>
</head>
<body>
<a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>
您可以在:before元素中添加以下内容:
display: inline-block;
white-space: pre-wrap;
随着display: inline-block下划线消失.但问题是三角形后的空间坍塌而未显示.要解决它,你可以使用white-space: pre-wrap或white-space: pre.
演示:http://jsfiddle.net/r42e5/9/