text-decoration-line

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La propriété CSS text-decoration-line permet de définir le type de décoration appliquée au texte d'un élément, comme un soulignement ou une ligne au-dessus du texte.

Exemple interactif

text-decoration-line: none;

text-decoration-line: underline;

text-decoration-line: overline;

text-decoration-line: line-through;

text-decoration-line: grammar-error;

text-decoration-line: spelling-error;

text-decoration-line: underline overline;

text-decoration-line: underline line-through;

<section id="default-example">
  <p>
    Je préfère être
    <span class="transition-all" id="example-element"
      >heureux que d'avoir raison</span
    >
    n'importe quel jour.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

Lors de la définition de plusieurs propriétés de décoration de ligne en même temps, il peut être plus pratique d'utiliser la propriété raccourcie text-decoration à la place.

Syntaxe

css

/* Valeurs avec un mot-clé */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: spelling-error;
text-decoration-line: grammar-error;

/* Valeurs avec plusieurs mots-clés */
text-decoration-line: underline overline; /* On a deux décorations pour la ligne */
text-decoration-line: overline underline line-through; /* On a plusieurs décorations */

/* Valeurs globales */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

La propriété text-decoration-line est définie comme none, ou une ou plusieurs valeurs séparées par des espaces à partir de la liste ci-dessous.

Valeurs

Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :

none: Aucune ligne ne décore le texte.
underline: Chaque ligne de texte est soulignée.
overline: Une ligne est dessinée au-dessus de chaque ligne de texte.
line-through: Une ligne est dessinée au milieu de chaque ligne de texte.
blink Obsolète: Le texte clignote (alterne entre visible et invisible). Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est obsolète au profit des animations CSS.
spelling-error: Chaque ligne de texte utilise la méthode des agents utilisateurs pour mettre en évidence les erreurs d'orthographe, ce qui est une ligne pointillée rouge dans la plupart des navigateurs.
grammar-error: Chaque ligne de texte utilise la méthode des agents utilisateurs pour mettre en évidence les erreurs de grammaire, ce qui est une ligne pointillée verte dans la plupart des navigateurs.

Note : Lors de l'utilisation des valeurs spelling-error et grammar-error, le navigateur ignore les autres propriétés dans le raccourci text-decoration (comme text-underline-position, color ou stroke).

Définition formelle

Valeur initiale	`none`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

text-decoration-line = 
  none                                                |
  [ underline || overline || line-through || blink ]  |
  spelling-error                                      |
  grammar-error

Exemples

Exemple simple

html

<p class="wavy">Voici un texte souligné avec une vaguelette rouge.</p>
<p class="both">Ce texte a des lignes à la fois au-dessus et en dessous.</p>

css

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

Exemple d'erreurs

Dans cet exemple, le premier paragraphe contient une faute d'orthographe et utilise le style du navigateur pour les erreurs d'orthographe sur le mot mal orthographié. Le deuxième paragraphe utilise le style du navigateur pour les erreurs de grammaire. Il n'y a aucun changement de style dans les navigateurs qui ne prennent pas en charge ces valeurs de text-decoration-line.

html

<p>Ce texte contient une <span class="spelling">fote</span> d'orthographe.</p>
<p class="grammar">Ce texte contient des erreur grammaticales.</p>

css

.spelling {
  text-decoration-line: spelling-error;
}

.grammar {
  text-decoration-line: grammar-error;
}

Spécifications

Spécification
CSS Text Decoration Module Level 3 # text-decoration-line-property

Compatibilité des navigateurs

Voir aussi

Lors de la définition de plusieurs propriétés de décoration de ligne en même temps, il peut être plus pratique d'utiliser la propriété raccourcie text-decoration, qui inclut également :
La propriété text-underline-offset
Le pseudo-élément ::spelling-error
Le pseudo-élément ::grammar-error

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 2 avr. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu