Souligner un texte en CSS en dessous du texte

Contexte : on souhaite souligner un texte en dessous du texte.

Les propriétés CSS modernes vont nous aider :

text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-thickness: 5px;
text-underline-offset: -5px;
text-decoration-color: #ffcc00;
text-decoration-skip-ink: none; /* marche sur Firefox & Chrome, mais pas Safari */ text-decoration-skip: none; / marche sur Safari, mais pas chrome et firefox */

Rendu :

Explications :

text-decoration-line: underline;
=> on demande de souligner le texte

text-decoration-style: solid;
=> le type de decoration sera solide (trait uniforme)

text-decoration-thickness: 5px;
=> épaisseur du trait : 5px;

text-underline-offset: -5px;
=> décalage du trait : 5px en négatif (vers le haut)

text-decoration-color: #ffcc00;
=> couleur du trait

text-decoration-skip-ink: none; /* marche sur Firefox & Chrome, mais pas Safari */
text-decoration-skip: none; / marche sur Safari, mais pas chrome et firefox */

=> ces 2 lignes vous permettent d'être compatible sur les différents navigateurs