“文本装饰”和“：后”伪元素，重新访问 [英] “text-decoration” and the “:after” pseudo-element, revisited

问题描述

我要重新询问此问题，因为其答案

I'm re-asking this question because its answers didn't work in my case.

在我的打印媒体样式表中，我想在每个链接后使用：after 伪类。

In my stylesheet for printed media I want to append the url after every link using the :after pseudo-class.

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

在Firefox（可能是Chrome但不是IE8）中， text-decoration：none 被忽略，并且下划线在网址底部不连接地延伸。然而 color 对于网址正确设置为黑色。是否有办法让 text-decoration 工作？

In Firefox (and probably Chrome but not IE8), text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the url. The color however is correctly set to black for the url. Is there a way to make the text-decoration work?

原始问题。它的答案使用填充和背景图像，以避免使用text-decoration属性。

The original question appended fixed size images instead of variable width text. Its answers use padding and background images to avoid having to use the text-decoration property. I'm still looking for a solution when the content is variable width text.

推荐答案

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

IE8's implementation of the :before and :after pseudo-elements is incorrect. Firefox, Chrome and Safari all implement it according to the CSS 2.1 specification.

5.12.3：before和：after -elements

'：before'和'：after'
伪元素可用于
在元素的内容之前或之后生成内容。

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.

...

层叠样式表第2级修订版1（CSS 2.1）规范

规格表示内容应插入元素内容 之前或之后，元素（即< element> 内容：内容内容之前：< / element>）。因此，在Firefox和Chrome中，您所遇到的文本修饰不是在插入的内容上，而是在包含插入内容的父锚元素上。

The specification indicates that the content should be inserted before or after the element's content, not the element (i.e. <element>content:before content content:after</element>). Thus in Firefox and Chrome the text-decoration you're encountering is not on the inserted content but rather on the parent anchor element that contains the inserted content.

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

I think your options are going to be using the background-image/padding technique suggested in your previous question or possibly wrapping your anchor elements in span elements and applying the pseudo-elements to the span elements instead.

这篇关于“文本装饰”和“：后”伪元素，重新访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！