如何删除只从下划线：之前？
我有一组样式的链接使用:before申请一个箭头。
它在所有浏览器中看起来都不错，但是当我将下划线应用到链接时，我不想:before部分（箭头）上加上下划线。
以jsfiddle为例： http : //jsfiddle.net/r42e5/1/
是否有可能删除这个？ testing样式我坐在#test pa:hover:before得到应用（根据Firebug），但下划线仍然在那里。
任何方法来避免这种情况？
#test { color: #B2B2B2; } #test pa { color: #B2B2B2; text-decoration: none; } #test pa:hover { text-decoration: underline; } #test pa:before { color: #B2B2B2; content: "► "; text-decoration: none; } #test pa:hover:before { text-decoration: none; }
<div id="test"> <p><a href="#">A link</a></p> <p><a href="#">Another link</a></p> </div>
是否有可能删除这个？
是的，如果将inline元素的显示风格从display:inline （默认值）更改为display:inline-block ：
#test pa:before { color: #B2B2B2; content: "► "; display:inline-block; }
这是因为CSS规格说 ：
当在内联元素上指定或传播时，它会影响由该元素生成的所有框，并进一步传播到分割内联的任何stream入块级框（请参阅第9.2.1.1节）。 对于所有其他元素，它被传播给任何stream入的孩子。 请注意，文本装饰不会传播到浮动且绝对定位的后代，也不会传播到内嵌块和内联表等primefaces内联级别后代的内容 。
（强调我的）
演示： http : //jsfiddle.net/r42e5/10/
感谢@Oriol提供的解决方法，促使我检查规范，并看到解决方法是合法的。
在IE8-11中有一个Bug ，所以使用display:inline-block; 一个人不会在那里工作。
我已经find了这个错误的解决scheme，通过明确设置text-decoration:underline; 为：before-content，然后用text-decoration:none;重写这个规则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下划线消失。 但问题在于三angular形倒塌后的空间并没有显示出来。 为了解决这个问题，你可以使用white-space: pre-wrap或者white-space: pre 。
演示 ： http : //jsfiddle.net/r42e5/9/
把你的链接换成跨度，然后把文字装饰添加到a：
a:hover span { text-decoration:underline; }
我已经更新你的小提琴，我认为你想要做的。 http://jsfiddle.net/r42e5/4/
尝试使用：
#test p:before { color: #B2B2B2; content: "► "; text-decoration: none; }
会这样吗？
用这个
#test p:before { color: #B2B2B2; content: "► "; }
