text-decoration-line

La propriété text-decoration-line définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci). La propriété raccourcie text-decoration permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

/* 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: 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: unset;

Valeur initiale	`none`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Type d'animation	discrète
Ordre canonique	l'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

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: Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les animations CSS pour obtenir un effet similaire.

Syntaxe formelle

none | [ underline || overline || line-through || blink ]

Exemples

HTML

<p>Voici un texte souligné avec une vaguelette rouge.</p>

CSS

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

Résultat

Spécifications

Spécification	État	Commentaires
CSS Text Decoration Module Level 3 La définition de 'text-decoration-line' dans cette spécification.	Candidat au statut de recommandation	Définition initiale. La propriété `text-decoration` n'était pas une propriété raccourcie auparavant.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple	(Oui)	6.0 (6.0) -moz^[1] 36.0 (36.0)	Pas de support	(Oui)	7.1 -webkit
`blink`	57	26.0 (26.0)^[2]	Pas de support	44	?

Fonctionnalité	Android	Chrome pour Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Support simple	(Oui)	(Oui)	6.0 (6.0) -moz^[1] 36.0 (36.0)	Pas de support	(Oui)	8 -webkit
`blink`	57	57	26.0 (26.0)^[2]	Pas de support	44	?

[1] La version préfixée a été avec Gecko 39.0 (Firefox 39.0 / Thunderbird 39.0 / SeaMonkey 2.36).

[2] La valeur est considérée comme valide mais l'agent utilisateur l'ignorera et aucun clignotement n'aura lieu.

Voir aussi

La propriété raccourcie text-decoration qui permet, entre autres, de paramétrer text-decoration-line.