text-decoration en CSS : styliser un soulignement sans bidouiller une bordure

Un lien souligné, un prix barré pendant une promotion, un mot mis en avant par une ligne au-dessus : ces trois décorations de texte paraissent basiques, et pourtant chacune a longtemps demandé des bidouilles en CSS avant que text-decoration ne devienne assez complète pour s'en passer.

Aujourd'hui, cette propriété ne se limite plus à activer ou désactiver un soulignement. Elle permet d'en choisir la couleur, l'épaisseur et le style, ce qui évite le détour, longtemps très répandu, par une border du bas détournée de son usage.

Définition

text-decoration ajoute une ligne décorative au texte : soulignée, barrée, surlignée au-dessus, ou aucune. C'est une propriété raccourci qui rassemble en réalité plusieurs sous-propriétés distinctes.

a {
  text-decoration: underline;
}

.prix-barre {
  text-decoration: line-through;
}

a.discret {
  text-decoration: none;
}

Les sous-propriétés qui composent le raccourci

Chacune de ces sous-propriétés peut être réglée indépendamment, ou combinée dans le raccourci text-decoration écrit en une seule ligne.

Un exemple concret : un soulignement stylisé

Avant l'arrivée de text-decoration-color et text-decoration-thickness, styliser un soulignement obligeait à retirer text-decoration et à simuler la ligne avec une bordure du bas ou un fond dégradé, une technique qui fonctionnait mais détournait des propriétés pensées pour tout autre chose.

a {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

La valeur currentColor mérite d'être connue ici : elle fait que le soulignement reprend automatiquement la couleur du texte, sans avoir à la dupliquer, et suit tout changement de couleur, par exemple avec :hover, sans ligne de CSS supplémentaire.

Le piège du soulignement qui traverse tout

Sur un lien qui contient plusieurs mots avec des espaces, text-decoration: underline; souligne l'intégralité de la ligne, espaces compris, ce qui peut sembler continu et propre. Mais dès qu'un lien contient un élément avec une hauteur différente, comme une icône ou un badge, le trait par défaut le traverse parfois de façon disgracieuse, sans respecter les creux naturels des lettres qui descendent sous la ligne, comme le g ou le p.

Bonnes pratiques

Pour un lien stylisé, préférez toujours les sous-propriétés text-decoration-color et text-decoration-thickness à une border détournée : le résultat suit correctement les lettres qui descendent sous la ligne, reste sémantiquement un soulignement pour les technologies d'assistance, et se retire proprement avec text-decoration: none; si besoin, sans avoir à annuler une bordure ailleurs dans le code.

Questions fréquentes

Le soulignement est l'indice visuel le plus universellement reconnu pour repérer un lien cliquable, en particulier pour les visiteurs qui distinguent mal les couleurs et ne peuvent pas se fier uniquement à un texte de couleur différente. Le retirer complètement, sans un autre signal visuel clair, réduit la facilité à repérer les liens dans un bloc de texte.

Le trait ondulé de text-decoration-style reste rattaché au texte, suit sa position et son épaisseur naturelle de soulignement, alors qu'une bordure ondulée demande de recréer manuellement l'espacement sous le texte. C'est aussi le style que les navigateurs utilisent par défaut pour signaler une faute d'orthographe soulignée.

Oui, elle s'applique à n'importe quel élément qui affiche du texte, pas uniquement aux liens. C'est ce qui permet, par exemple, de barrer un prix en promotion avec text-decoration: line-through; sur une simple balise de mise en forme.

Oui, text-decoration-line accepte plusieurs valeurs séparées par un espace, par exemple underline overline pour afficher à la fois un trait au-dessus et en dessous du texte. C'est un usage rare, mais utile pour certains encadrements typographiques particuliers.