css - “text-decoration” 和 “:after” 伪元素，重访

Question

我正在重新询问 this question因为它的答案对我不起作用。

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

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

在 Firefox(可能还有 Chrome 但不是 IE8)中，text-decoration: none 被忽略，并且下划线在 url 的底部延伸得不好看。但是，color 已正确设置为 url 的黑色。有没有办法让 text-decoration 起作用？

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

Answer 1

如果您在 :after 伪类上使用 display: inline-block，text-decoration 声明将起作用。

在 Chrome 25、Firefox 19 中测试