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

Résolution du conflit de pseudo-éléments :après avec "text-decoration"

Posé à l'origine pour résoudre le problème de l'ajout d'images après des liens en utilisant :après, cette question a refait surface en mettant l'accent sur l'ajout de texte à largeur variable.

Le défi réside dans l'application du "text-decoration: none" au pseudo-élément :after tout en conservant son affichage de contenu. Dans Firefox et Chrome, le soulignement de l'URL persiste, annulant l'effet escompté.

La clé pour surmonter cet obstacle réside dans la définition de la propriété "display: inline-block" pour :after. Cette technique a été testée avec succès dans Chrome 25 et Firefox 19. Voici un exemple de son fonctionnement :

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

En définissant "display: inline-block", vous convertissez efficacement le pseudo-élément :after en un élément de type bloc, permettant à la propriété "text-decoration" de prendre effet comme prévu. Cette technique garantit que le soulignement ne s'étend plus sur l'URL, ce qui donne l'effet visuel souhaité.

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!