text-decoration

La propriété text-decoration est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte.

/* Valeurs avec mots-clés */
text-decoration: none;                 /* Aucune décoration */
text-decoration: underline red;        /* On souligne en rouge */
text-decoration: underline wavy red;   /* On souligne en rouge avec */
                                       /* une ligne ondulée */

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

Ces décorations se propagent sur les différents éléments fils. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML <p>Ce texte a <em> des mots mis en avant</em> dedans.</p>, et cette règle CSS p { text-decoration: underline; }, on aura tout le paragraphe souligné, même si on applique la règle em { text-decoration: none; }, cela n'aurait aucun impact. En revanche, ajouter la règle em { text-decoration: overline; } entraînerait un cumul des décorations pour « des mots mis en avant ».

Note : La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés text-decoration-color, text-decoration-line et text-decoration-style. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie.

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `text-decoration-color`: `currentcolor` `text-decoration-style`: `solid` `text-decoration-line`: `none`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	non
Média	visuel
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `text-decoration-line`: comme spécifié `text-decoration-style`: comme spécifié `text-decoration-color`: si la valeur est translucide, la valeur calculée est la fonction `rgba()`correspondante. Sinon, la fonction `rgb()`correspondante. Le mot-clé `transparent` devient `rgb(0,0,0)`.
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `text-decoration-color`: une couleur `text-decoration-style`: discrète `text-decoration-line`: discrète
Ordre canonique	l'ordre d'apparition dans la grammaire formelle des valeurs

Syntaxe

Valeurs

La propriété text-decoration est une propriété raccourcie qui permet de combiner les valeurs des trois propriétés qui peuvent la composer : text-decoration-line, text-decoration-color et text-decoration-style

Syntaxe formelle

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

Exemples

CSS

h1.under {
  text-decoration: underline;
}
h1.over {
  text-decoration: overline;
}
p.line {
  text-decoration: line-through;
}
a.none {
  text-decoration: none;
}
p.underover {
  text-decoration: underline overline;
}

HTML

<h1 class="under">Underlined Header</h1>
<p class="line">If you want to strike out text, use line-through.</p>
<h1 class="over">and now an overlined header.</h1>
<p>This <a class="none" href="textdecoration.html">link will not be underlined</a>, as most links are by default. Be careful with removing the text decoration on links since most users depend on the underline to signify a hyperlink.</p>
<p class="underover">This text has both underline and overline.</p>

Résultat

Spécifications

Spécification	État	Commentaires
CSS Text Decoration Module Level 3 La définition de 'text-decoration' dans cette spécification.	Candidat au statut de recommandation	Transformée comme une propriété raccourcie. Ajout du support pour la valeur de `text-decoration-style`.
CSS Level 2 (Revision 1) La définition de 'text-decoration' dans cette spécification.	Recommendation	Pas de changement significatif.
CSS Level 1 La définition de 'text-decoration' dans cette spécification.	Recommendation	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Chrome	Edge	Internet Explorer	Opera	Safari
Support simple	1	1.0 (1.7 ou moins)	1.0	(Oui)	3.0	3.5	1.0
`blink`	57	1.0 (1.7 ou moins) 23.0 (23.0)	(Oui)	(Oui)^[1]	(Oui)^[1]	4.0 15.0^[1]	(Oui)^[1]
Propriété raccourcie	?	6.0 (6.0)^[3] 36.0 (36.0)	(Oui)	Pas de support	Pas de support	Pas de support	7.1^[2]

Fonctionnalité	Webview Android	Chrome pour Android	Firefox Mobile (Gecko)	Android	Edge	IE Phone	Opera Mobile	Safari Mobile
Support simple	(Oui)	(Oui)	1.0 (1.0)	(Oui)	(Oui)	(Oui)	(Oui)	(Oui)
`blink`	57	57	1.0 (1.7 ou moins) 23.0 (23.0)^[1]	(Oui)^[1]	(Oui)^[1]	(Oui)^[1]	4.0^[1]	(Oui)^[1]
Propriété raccourcie	?	?	6.0 (6.0)^[3] 36.0 (36.0)	?	Pas de support	?	?	8^[1]

[1] La valeur blink n'a aucun effet.

[2] Safari ne supporte pas text-decoration-style.

[3] Cette version de Gecko possède une implémentation partielle.

Voir aussi

L'attribut list-style qui contrôle la façon dont les éléments apparaissent dans les listes HTML <ol> et <ul>.