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

Resolving the :after Pseudo-Element Conflict with "text-decoration"

Originally posed to resolve the issue of appending images after links using :after, this question has resurfaced with a focus on appending variable width text.

The challenge lies in applying the "text-decoration: none" property to the :after pseudo-element while maintaining its content display. In Firefox and Chrome, the underline for the URL persists, negating the intended effect.

The key to overcoming this obstacle lies in setting the "display: inline-block" property for :after. This technique has been successfully tested in Chrome 25 and Firefox 19. Here's an example of how it works:

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

By setting "display: inline-block," you effectively convert the :after pseudo-element into a block-like element, allowing the "text-decoration" property to take effect as expected. This technique ensures that the underline no longer stretches across the URL, resulting in the desired visual effect.

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