Personnalisation des couleurs de soulignement du texte avec CSS

Dans la conception Web, l'ajout d'un soulignement au texte est une pratique courante pour souligner ou mettre en évidence des informations. Cependant, que se passe-t-il si vous souhaitez ajouter une touche unique en changeant la couleur du soulignement ? Est-ce possible ?

Oui, il est possible de changer la couleur de la ligne sous le texte en utilisant CSS. Voici deux méthodes que vous pouvez utiliser :

Méthode 1 : Utilisation de text-decoration-color

L'approche la plus simple consiste à utiliser la propriété text-decoration-color. Cette propriété spécifie la couleur du soulignement, vous permettant de la personnaliser indépendamment de la couleur du texte.

Par exemple, pour créer du texte rouge avec un soulignement bleu, vous utiliserez le CSS suivant :

text-decoration-color: blue;

Méthode 2 : Utilisation de border-bottom

Une méthode alternative consiste à utiliser la propriété border-bottom. Cette propriété crée une bordure au bas du texte, qui peut simuler un soulignement. En définissant la propriété border-bottom-color, vous pouvez spécifier la couleur du soulignement.

Par exemple, voici comment obtenir le même effet que la méthode 1 en utilisant border-bottom :

border-bottom: 1px solid blue;
text-decoration: none;

Remarque : La propriété text-decoration-color est prise en charge par les navigateurs modernes. Si vous devez prendre en charge des navigateurs plus anciens, vous souhaiterez peut-être utiliser la méthode border-bottom pour des raisons de compatibilité.