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.

Syntaxe

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

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

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.

Valeur initialenone
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet OuiEdge ? Firefox Support complet 36
Support complet 36
Aucun support 6 — 39
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Aucun support NonOpera Support complet OuiSafari Support complet Oui
Préfixée
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 36
Support complet 36
Aucun support 6 — 39
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android Support complet OuiSafari iOS Support complet 8
Préfixée
Support complet 8
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Samsung Internet Android Support complet Oui
blink
Obsolète
Chrome Support complet 57
Notes
Support complet 57
Notes
Notes The blink value does not have any effect.
Edge ? Firefox Support complet 26
Notes
Support complet 26
Notes
Notes The blink value does not have any effect.
IE Aucun support NonOpera Support complet 44Safari ? WebView Android Support complet 57
Notes
Support complet 57
Notes
Notes The blink value does not have any effect.
Chrome Android Support complet 57
Notes
Support complet 57
Notes
Notes The blink value does not have any effect.
Edge Mobile ? Firefox Android Support complet 26
Notes
Support complet 26
Notes
Notes The blink value does not have any effect.
Opera Android Support complet 44Safari iOS ? Samsung Internet Android Support complet 7.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

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

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,