装饰“和”后“伪
我正在重新问这个问题，因为它的答案在我的情况下不起作用。
在我的印刷媒体样式表中，我想在每个链接之后使用:after伪类追加url。
a:after {
content: " <" attr(href) ">";
text-decoration: none;
color: #000000;
}
在Firefox（也可能是Chrome浏览器，但不包括IE8）中， text-decoration: none被忽略，并且下划线在url的底部延伸无趣。 但是， color正确设置为黑色的网址。 有没有办法使text-decoration作品？
原始问题附加了固定大小的图像，而不是可变宽度的文本。 它的答案使用填充和背景图像来避免使用文本修饰属性。 当内容是可变宽度文本时，我仍在寻找解决方案。
IE8的执行：之前和之后：伪元素不正确。 Firefox，Chrome和Safari都根据CSS 2.1规范来实现它。
5.12.3：之前和之后：伪元素
'：before'和'：after'伪元素可用于在元素内容之前或之后插入生成的内容。 他们在生成的文本部分解释。
...
层叠样式表2级修订1（CSS 2.1）规范
该规范指出应该在元素的内容之前或之后插入内容， 而不是元素 （即<element> content：在内容content：之前</ element>之前）。 因此，在Firefox和Chrome中，遇到的文本修饰不在插入的内容上，而是在包含插入内容的父锚元素上。
我认为你的选择将会使用前一个问题中提出的background-image / padding技术，或者将你的锚元素包装到span元素中，并将伪元素应用到span元素。
如果您在:after伪使用display: inline-block ，则text-decoration声明将起作用。
测试Chrome 25，Firefox 19
或者，您可以使用底部边框而不是文字修饰。 这假定你知道背景的颜色
a {
text-decoration: none;
border-bottom: 1px solid blue;
}
a:after {
content: "foo";
border-bottom: 1px solid white; /* same color as the background */
}