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).

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é
Animablenon
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

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

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 :

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 Statut Commentaires
CSS Text Decoration 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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple Pas de support 6.0 (6.0) -moz[1]
36.0 (36.0)
Pas de support Pas de support 7.1 -webkit
blink Pas de support 26.0 (26.0)[2] Pas de support Pas de support ?
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple Pas de support Pas de support[3] 6.0 (6.0) -moz[1]
36.0 (36.0)
Pas de support Pas de support 8 -webkit
blink Pas de support Pas de support 26.0 (26.0)[2] Pas de support Pas de support ?

[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.

[3] Voir WebKit bug 90959.

Étiquettes et contributeurs liés au document

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