html - 如何仅从 :before? 中删除下划线

Question

我有一组使用 :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>

Answer 1

Is it possible to remove this?

是的，如果您将内联元素的显示样式从 display:inline(默认)更改为 display:inline-block:

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

这是因为the CSS specs say :

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

(强调我的。)

演示:http://jsfiddle.net/r42e5/10/

_{感谢@Oriol 提供了解决方法，促使我检查规范并确认该解决方法是合法的。}