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

问题描述

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

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

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

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

有什么办法可以避免这种情况？

＃

 < div id =test> < p>< a href =＃>连结< / a>< / p> < p>< a href =＃>另一个连结< / a>< / p>< / div>  

解决方案

是否可以删除它？

是的，如果您将内联元素的显示风格从 display：inline （默认值）更改为 display：inline-block ：

  #test pa：之前{
颜色：＃B2B2B2; 
内容：►; 
 display：inline-block; 
} 
  

这是因为 CSS规格说：
$ b

或传播到内联元素，它会影响该元素生成的所有框，并进一步传播到任何分流内联的流入块级框（请参阅第9.2.1.1节）。 [...]对于所有其他元素它传播给任何流入儿童。请注意，文本装饰不会传播为浮动且绝对定位的后代，也不会与原内联级别后代的内容（如嵌入式块和内联表）

（Emphasis mine。）

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

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

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).

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

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?

#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>

解决方案

Is it possible to remove this?

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;
}

This is because 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.

(Emphasis mine.)

Demo: 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.}

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