css – “text-decoration”和“:after”伪元素,重新访问

前端之家收集整理的这篇文章主要介绍了css – “text-decoration”和“:after”伪元素,重新访问前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我重新询问 this question,因为它的答案没有在我的情况下工作。

在我的样式表中打印的媒体,我想在每个链接后使用:after伪类后添加url。

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
}

在Firefox(可能是Chrome但不是IE8)中,text-decoration:none被忽略,下划线在网址底部延伸。然而,对于网址,颜色被正确设置为黑色。有没有办法使文本装饰工作?

original question附加的固定大小的图像而不是可变宽度的文本。它的答案使用填充和背景图像,以避免使用text-decoration属性。当内容是可变宽度的文本时,我仍然在寻找一个解决方案。

解决方法

IE8的实现:before和:after伪元素不正确。 Firefox,Chrome和Safari都根据CSS 2.1规范实现它。

5.12.3 The :before and :after pseudo-elements

The ‘:before’ and ‘:after’
pseudo-elements can be used to insert
generated content before or after an
element’s content. They are explained
in the section on generated text.

07000

规范指示内容应当在元素的内容之前或之后插入,而不是元素(即< element> content:before content< / element>之后)。因此,在Firefox和Chrome中,遇到的文本装饰不是在插入的内容上,而是在包含插入内容的父锚元素上。

我认为你的选择将使用在上一个问题中建议的background-image / padding技术,或者可能在span元素中包装您的锚点元素,而将伪元素应用于span元素。

猜你在找的CSS相关文章