再谈“文本修饰”和“：after”伪元素

Question

我要重新提出这个问题，因为在我的情况下它的答案不起作用。

在我的印刷媒体样式表中，我想使用:after伪类在每个链接后附加URL 。

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

在Firefox（可能是Chrome，但不是IE8）中，text-decoration: none它会被忽略，并且下划线在URL的底部引人注目。该color然而，正确设置为黑色的网址。有没有办法做这项text-decoration工作？

的原来的问题所附固定大小的图像，而不是可变宽度的文本。它的答案使用填充和背景图像，以避免必须使用text-
decoration属性。当内容为可变宽度文本时，我仍在寻找解决方案。

Answer 1

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

5.12.3：before和：after伪元素

伪元素’：before’和’：after’可用于 在 元素 content之前或之后 插入 生成 的内容
。它们在生成的文本部分中说明。

…

级联样式表2级修订1（CSS 2.1）规范

规范指出内容应该插入在 元素的内容 之前或之后， 而不是元素 （即 content：before content
content：after
）之前或之后。因此，在Firefox和Chrome中，您遇到的文本装饰不在插入的内容上，而是在包含插入内容的父锚元素上。

我认为您的选择将使用上一个问题中建议的背景图像/填充技术，或者可能将锚元素包裹在span元素中，然后将伪元素应用于span元素。