如何使用 :after 和可变宽度文本删除附加 URL 中的下划线？

解决文本装饰和 :after 伪元素

在之前的询问中，使用 :after 伪类来解决问题提出了将 URL 附加到打印样式表中的链接。然而，所提供的答案被证明是不够的。

主要的问题是无法从附加的 URL 中删除默认的下划线样式，尽管明确设置了“text-decoration: none;”。这导致在 Firefox 和 Chrome 等浏览器中，URL 下方出现不吸引人的下划线。

可变宽度文本的解决方案

之前建议的解决方案采用了填充等技术和背景图像来规避有问题的文本装饰属性。但是，当附加的内容是可变宽度文本时，这些方法不适用。

要解决此问题，请将 :after 伪元素的 display 属性修改为 'inline-block'。这允许“文本装饰：无；”声明生效，如以下代码所示：

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

调整后的 CSS 可确保附加的 URL 显示时没有任何下划线，无论其宽度如何。通过应用此解决方法，您可以有效地将可变宽度文本附加到链接并指定其所需的颜色，从而解决最初的问题并提供更精细的 URL 打印呈现。

以上是如何使用 :after 和可变宽度文本删除附加 URL 中的下划线？的详细内容。更多信息请关注PHP中文网其他相关文章！