Pourquoi « text-decoration: none » ne fonctionne-t-il pas sur les pseudo-éléments :after pour les liens dans les médias imprimés ?

Revisité : Utilisation de « text-decoration » et du pseudo-élément « :after »

Pour tenter de résoudre un problème existant, la question se pose : pourquoi la propriété "text-decoration: none" semble-t-elle inefficace lorsqu'elle est utilisée avec le pseudo-élément ":after" pour ajouter du texte à un lien? Plus précisément, dans les médias imprimés, le résultat souhaité est d'afficher l'URL après le texte du lien, sans aucun soulignement gênant.

La question initiale portait sur l'ajout d'images de taille fixe, mais cette requête cherche une solution lorsque le contenu est un texte à largeur variable. Comme les réponses précédentes suggéraient d'utiliser du remplissage et des images d'arrière-plan, qui ne conviennent pas au contenu textuel, une approche alternative est recherchée.

Réponse :

La solution réside dans l'application du propriété "display: inline-block" au pseudo-élément ":after". Ce faisant, la propriété "text-decoration: none" peut être utilisée efficacement pour supprimer tout soulignement.

Pour démontrer, le code suivant fonctionne désormais comme prévu :

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

Cela a a été testé dans Chrome 25 et Firefox 19, et il masque avec succès le soulignement tout en affichant le texte de l'URL.

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!