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

问题描述

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

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

以jsfiddle为例:http://jsfiddle.net/r42e5/1/>

可以删除这个吗?我与 #test p a:hover:before 一起使用的测试样式确实得到了应用(根据 Firebug)，但下划线仍然存在.

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

#test {颜色:#B2B2B2；}#test p a {颜色:#B2B2B2；文字装饰:无；}#test p a:悬停{文字装饰:下划线；}#test p a:before {颜色:#B2B2B2；内容:►"；文字装饰:无；}#test p a:hover:before {文字装饰:无；}

<p><a href="#">链接</a></p><p><a href="#">另一个链接</a></p>

解决方案

可以删除这个吗?

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

#test p a:before {颜色:#B2B2B2；内容:►"；显示:内联块；}

这是因为CSS规范说:

<块引用>

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

(强调我的.)

演示: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屋！