如何解决伪元素后的'文本装饰”冲突？

解决:after伪元素与“text-decoration”的冲突

最初是为了解决使用链接后附加图像的问题:after，这个问题再次出现，重点是附加可变宽度文本。

挑战在于将“text-decoration: none”属性应用于 :after 伪元素，同时保持其内容显示。在 Firefox 和 Chrome 中，URL 的下划线仍然存在，从而抵消了预期的效果。

克服这一障碍的关键在于为 :after 设置“display: inline-block”属性。该技术已在 Chrome 25 和 Firefox 19 中成功测试。以下是其工作原理的示例：

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

通过设置“display: inline-block”，您可以有效地将 :after 伪元素转换为类似块的元素，允许“text-decoration”属性按预期生效。此技术可确保下划线不再延伸穿过 URL，从而产生所需的视觉效果。

以上是如何解决伪元素后的'文本装饰”冲突？的详细内容。更多信息请关注PHP中文网其他相关文章！