如何从a：before删除下划线 [英] How to remove only underline from a:before

问题描述

我有一组样式链接使用：之前应用箭头。

I have a set of styled links using the :before to apply an arrow.

在所有浏览器中，但是当我应用下划线到链接，我不想在：之前部分（箭头）下划线。

It looks good in all browser, but when I apply the underline to the link, I don't want to have underline on the :before part (the arrow).

请参阅jsfiddle例如： http://jsfiddle.net/r42e5/1/

See jsfiddle for example: http://jsfiddle.net/r42e5/1/

是否可以删除此项？测试样式我坐在 #test pa：hover：before 之前应用（根据Firebug），但下划线仍然存在。

Is it possible to remove this? The test-style I sat with #test p a:hover:before does get applied (according to Firebug), but the underline is still there.

以任何方式避免这种情况？

Any way to avoid this?

推荐答案

删除此内容？

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

Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:

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

这是因为 CSS规格说明：

This is because the CSS specs say:

on或传播到内联元素，则它会影响由该元素生成的所有框，并进一步传播到任何拆分内联的流入块级框（参见第9.2.1.1节）。 [...]对于所有其他元素，它被传播到任何流中的孩子。请注意，文本装饰不会传播到浮动和绝对定位的后代，也不能传递到原子行内级后代（如内联块和内联表）的内容。

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.

（强调我。）

_{感谢@ Oriol提供解决方法，促使我检查规格，并看到解决方法是合法的。}

这篇关于如何从a：before删除下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！