Comment résoudre le conflit de « décoration de texte » avec les pseudo-éléments :after ?

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!