CSS : souligner du texte avec text-decoration, y compris sur plusieurs lignes

Pour souligner un texte en CSS, utilisez la propriété native text-decoration: underline. Elle s’applique à un paragraphe, un titre, une expression ou un lien. CSS permet ensuite de régler la couleur, l’épaisseur, le style et l’écart entre le trait et les lettres, tout en préservant la lisibilité.

La méthode rapide pour souligner un texte en CSS

La propriété text-decoration ajoute ou retire une décoration textuelle. Sa valeur underline affiche une ligne sous le contenu de l’élément ciblé. C’est la solution à privilégier pour un soulignement lié au texte, notamment dans un lien ou pour signaler une information.

Pour souligner tous les paragraphes d’une zone donnée, ciblez cette zone avec un sélecteur :

.contenu p { text-decoration: underline;}

Une classe CSS est souvent plus pratique lorsque le style doit rester réutilisable. Elle permet de souligner uniquement une partie du contenu sans modifier tous les paragraphes :

.texte-souligne { text-decoration: underline;}

<p>Une information <span class="texte-souligne">importante</span> à retenir.</p>

La même propriété accepte d’autres valeurs. overline place un trait au-dessus du texte, line-through le barre et none retire une décoration appliquée directement à l’élément. Pour un soulignement classique, text-decoration: underline reste la déclaration la plus directe.

Personnaliser la couleur, le style et l’épaisseur du soulignement

text-decoration est une propriété raccourcie. Elle regroupe text-decoration-line, text-decoration-color, text-decoration-style et text-decoration-thickness. Les propriétés détaillées facilitent le réglage de chaque paramètre, tandis que la forme raccourcie convient aux règles plus compactes.

Voici une règle complète, adaptée à un titre ou à une expression importante :

.accent { text-decoration-line: underline; text-decoration-color: #0f5c5c; text-decoration-style: solid; text-decoration-thickness: 3px; text-underline-offset: 0.18em;}

La forme raccourcie donne un résultat équivalent pour les quatre premières propriétés : text-decoration: underline solid #0f5c5c 3px;. Les styles dotted et wavy peuvent servir à signaler une correction, une incertitude ou une information secondaire. Pour la navigation et les appels à l’action, un trait continu reste généralement plus discret.

Éviter les collisions avec les lettres et les retours à la ligne

Un trait trop proche du texte peut gêner la lecture, surtout près des lettres à jambage comme g, j, p, q et y. La propriété text-underline-offset crée un espace vertical entre les caractères et le soulignement. Avec text-decoration-skip-ink, le navigateur peut interrompre le trait autour des parties descendantes des glyphes :

.lecture-confortable { text-decoration: underline; text-decoration-thickness: 0.2em; text-underline-offset: 0.15em; text-decoration-skip-ink: auto;}

Le décalage améliore souvent le rendu sans nécessiter un trait très épais. Cet ajustement est utile avec une police dense, du texte en gras ou une interface affichée sur petit écran. Testez d’abord l’écart entre les lettres et la ligne, puis modifiez l’épaisseur si nécessaire.

Pourquoi text-decoration est adapté aux textes multilignes

Lorsqu’une expression s’étend sur deux ou trois lignes, text-decoration suit naturellement chaque fragment du texte. La propriété convient donc aux liens longs dans un article ou dans une carte responsive. À l’inverse, un border-bottom appliqué à un élément en ligne peut produire un rendu moins régulier selon la mise en page.

Souligner ou désouligner les liens sans nuire à l’accessibilité

Les liens sont souvent soulignés par défaut, car ce repère les distingue du texte courant. Si vous retirez ce trait dans un menu ou un composant graphique avec text-decoration: none, ajoutez un autre indicateur clair : une couleur suffisamment contrastée, un fond, une icône, une graisse différente ou un état visible au survol.

a { color: #075985; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em;}a:hover,a:focus { color: #9f1239; text-decoration-thickness: 3px;}

L’état focus doit rester visible pour les personnes qui naviguent au clavier. Ne limitez pas le retour visuel au seul état hover : celui-ci n’existe pas de la même manière sur les écrans tactiles et ne s’applique pas à la navigation avec la touche Tab. La compréhension d’un lien ne doit pas dépendre uniquement de la couleur. Le soulignement reste un repère familier, surtout dans un long texte.

Créer un soulignement animé et choisir la bonne technique

Pour animer un trait au survol, vous pouvez utiliser un pseudo-élément. Cette méthode convient à un libellé court de bouton ou de menu. L’élément parent doit être positionné pour que le trait reste attaché au bon emplacement.

.lien-anime { position: relative; text-decoration: none;}.lien-anime::after { content: ""; position: absolute; left: 0; bottom: -0.4em; width: 100%; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s;}.lien-anime:hover::after,.lien-anime:focus::after { transform: scaleX(1);}

Text-decoration, border-bottom ou gradient ?

Choisissez text-decoration pour un soulignement associé au texte, personnalisable et adapté aux retours à la ligne. Utilisez plutôt border-bottom lorsqu’un trait doit appartenir à un bloc, par exemple sous un onglet de navigation. Un linear-gradient associé à background-size convient à un surlignage progressif ou à un trait qui doit suivre plusieurs lignes, mais cette approche demande davantage de réglages.

Les pseudo-éléments sont moins adaptés aux textes multilignes : leur trait conserve généralement une seule largeur sous l’élément entier. Pour animer un lien long, un gradient peut offrir un rendu plus cohérent. Si une règle ne produit pas l’effet attendu, vérifiez le sélecteur, l’ordre des déclarations et la spécificité CSS. Une décoration définie sur un ancêtre peut se propager visuellement aux descendants. Dans ce cas, ajouter text-decoration: none à l’enfant ne suffit pas toujours à retirer le trait.