Comment puis-je changer la couleur du texte souligné ?

Changer la couleur du texte souligné

Il est courant de vouloir styliser le texte avec le soulignement, mais que se passe-t-il si vous souhaitez personnaliser la couleur de ce soulignement ? Par défaut, le soulignement partage la même couleur que le texte, mais il existe des moyens de modifier ce comportement pour améliorer l'attrait visuel.

Pour ce faire, les navigateurs modernes prennent désormais en charge la propriété text-decoration-color, ce qui la rend une tâche simple. Spécifiez simplement la valeur de couleur souhaitée et le soulignement prendra cette teinte.

Cependant, si vous devez répondre aux besoins des navigateurs plus anciens qui ne prennent pas en charge la couleur de la décoration du texte, une solution alternative existe. En définissant une bordure au bas du texte, vous pouvez créer l’apparence d’un soulignement. La couleur de la bordure peut être contrôlée comme n'importe quelle autre bordure, permettant ainsi la personnalisation.

Voici un exemple utilisant CSS :

<code class="css">a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}

a:hover {
  border-bottom-color: green;
}</code>

Cette approche fonctionne de manière fiable sur tous les navigateurs et constitue un excellent moyen d'ajouter une touche de style au texte souligné.

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!