Html 如何从 a：before 中仅删除下划线

发布于01月11日

我有一组带样式的链接，使用:before来应用箭头.

它在所有浏览器中看起来都很好，但是当我将下划线应用到链接时，我不希望在:before部分(箭头)上有下划线.

参见jsfiddle，例如:http://jsfiddle.net/r42e5/1/

可以把这个go 掉吗？我与#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>

推荐答案

可以把这个go 掉吗？

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

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

这是因为:

在内联元素上指定或传播到内联元素时，它会影响该元素生成的所有框，并进一步传播到拆分内联的任何流内挡路级别的框(请参阅第9.2.1.1节).[…]对于所有其他元素，它被传播到任何流入子元素.请注意，文本修饰是not propagated到浮动和绝对定位的子体，也不是to the contents of atomic inline-level descendants such as inline blocks and inline tables.

(重点是我的.)