How to Resolve the 'text-decoration' Conflict with :after Pseudo-Elements?

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.

The above is the detailed content of How to Resolve the 'text-decoration' Conflict with :after Pseudo-Elements?. For more information, please follow other related articles on the PHP Chinese website!