为什么在印刷媒体中使用':after”伪元素时'text-decoration: none”无法去除链接下划线？

重新审视“文本装饰”和“:after”伪元素在印刷媒体风格化中的作用

在领域在打印样式中，经常需要使用“:after”伪元素在链接后显示补充信息。然而，完成这项看似简单的任务可能会带来挑战。值得注意的是，“text-decoration”属性（旨在从链接中删除默认下划线）已被观察到在某些浏览器中表现出意外行为。

初始方法：遇到问题

在最初尝试使用“:after”伪元素在链接后附加 URL 时，以下样式表是受雇：

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

令用户沮丧的是，这种方法被证明是不成功的。在 Firefox 和 Chrome 中，“text-decoration: none”声明被忽略，导致显示的 URL 底部出现难看的下划线。

解决困境：引入“display: inline-” block"

经过一番探索，用户偶然发现了解决该问题的解决方案。通过将“display: inline-block”应用于“:after”伪元素，“text-decoration”属性开始按预期发挥作用。

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

此修改可确保在链接显示为内联块，允许“text-decoration”属性有效地删除下划线，无论使用什么浏览器。

以上是为什么在印刷媒体中使用':after”伪元素时'text-decoration: none”无法去除链接下划线？的详细内容。更多信息请关注PHP中文网其他相关文章！