如何仅删除 a:before 中的下划线？

我有一组样式链接，使用:before应用箭头。

它在所有浏览器中看起来都不错，但是当我将下划线应用于链接时，我不想在链接上有下划线:before部分（箭头）。

请参阅 jsfiddle 例如：http://jsfiddle.net/r42e5/1/ 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>

可以删除这个吗？

是的，如果您将内联元素的显示样式从display:inline（默认）到display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

这是因为CSS 规范说 http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration:

当在内联元素上指定或传播到内联元素时，它会影响该元素生成的所有框，并进一步传播到分割内联的任何流内块级框（请参见第 9.2.1.1 节）。 [...] 对于所有其他元素，它会传播到任何流入的子元素。请注意，文字装饰是没有传播浮动和绝对定位的后代，也不是原子内联级后代的内容，例如内联块和内联表.

（强调我的。）

Demo: http://jsfiddle.net/r42e5/10/ http://jsfiddle.net/r42e5/10/

_{Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.}