Comment puis-je changer la couleur d'un soulignement en CSS ?

Couleur de soulignement de décoration de texte CSS

Dans le développement Web, il existe des scénarios dans lesquels vous souhaiterez peut-être styliser le soulignement du texte. Cet article aborde le défi consistant à changer la couleur du soulignement sous une ligne de texte, créant ainsi un effet visuel distinct.

Solution 1 : text-decoration-color (Navigateurs modernes)

Pour les navigateurs modernes prenant en charge la propriété text-decoration-color, appliquez simplement la règle CSS suivante :

text-decoration-color: green;

Cette méthode permet de spécifier directement la couleur de soulignement.

Solution 2 : border-bottom (anciens navigateurs)

Si la propriété text-decoration-color n'est pas prise en charge par un navigateur plus ancien, une approche alternative consiste à utiliser la propriété border-bottom :

a:link {
  color: red;
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:hover {
 border-bottom-color: green;
}

Cette approche ajoute une bordure colorée au bas du texte, imitant efficacement l'apparence d'un soulignement.

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!