为什么'text-decoration: none”不适用于印刷媒体中链接的 :after 伪元素？

重访：使用“text-decoration”和“:after”伪元素

尝试解决现有问题，提出了问题：为什么“text-decoration: none”属性在与“:after”伪元素一起使用来附加文本时似乎无效一个链接？具体来说，在印刷媒体中，期望的结果是在链接文本之后显示 URL，而没有任何分散注意力的下划线。

最初的问题集中于附加固定大小的图像，但此查询在内容时寻求解决方案是可变宽度文本。由于之前的答案建议使用不适合文本内容的填充和背景图像，因此寻求替代方法。

答案：

解决方案在于应用将“display: inline-block”属性设置为“:after”伪元素。通过这样做，可以有效地使用“text-decoration: none”属性来删除任何下划线。

为了演示，以下代码现在可以按预期工作：

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

这有在 Chrome 25 和 Firefox 19 中进行了测试，成功隐藏下划线，同时仍然显示 URL 文本。

以上是为什么'text-decoration: none”不适用于印刷媒体中链接的 :after 伪元素？的详细内容。更多信息请关注PHP中文网其他相关文章！