Pourquoi « text-decoration: none » ne parvient-il pas à supprimer les soulignements des liens lors de l'utilisation du pseudo-élément « :after » dans les médias imprimés ?

Revisiter le rôle de la « décoration de texte » et du pseudo-élément « :après » dans la stylisation des médias imprimés

Dans le domaine de style d'impression, le désir d'afficher des informations supplémentaires après les liens en utilisant le pseudo-élément ":after" surgit souvent. Cependant, accomplir cette tâche apparemment simple peut présenter des défis. Notamment, la propriété « text-decoration », destinée à supprimer le soulignement par défaut des liens, a été observée pour présenter un comportement inattendu dans certains navigateurs.

Approche initiale : problèmes rencontrés

Dans une première tentative d'ajout d'URL après des liens en utilisant le pseudo-élément ":after", la feuille de style suivante a été utilisée :

a:after {
  content: " <" attr(href) ">";
  text-decoration: none;
}

Au grand désarroi de l'utilisateur, cette approche s'est avérée infructueuse. Dans Firefox et Chrome, la déclaration "text-decoration: none" a été ignorée, ce qui a entraîné un soulignement disgracieux s'étendant au bas de l'URL affichée.

Résoudre le dilemme : introduction de "display: inline- block"

经过一番探索， l'utilisateur est tombé sur une solution qui résolvait le problème. En appliquant "display: inline-block" au pseudo-élément ":after", la propriété "text-decoration" a commencé à fonctionner comme prévu.

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

Cette modification garantit que le contenu ajouté après le links est affiché sous forme de bloc en ligne, permettant à la propriété "text-decoration" de supprimer efficacement le soulignement, quel que soit le navigateur utilisé.

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!