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. C'est une propriété raccourcie qui permet de paramétrer simultanément les propriétés « détaillées » : text-decoration-line, text-decoration-color et text-decoration-style.

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.

Syntaxe

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

Valeurs

text-decoration-line
Cette valeur indique le type de décoration utilisée.
text-decoration-color
Cette valeur indique la couleur de la décoration utilisée.
text-decoration-style
Cette valeur indique le style à utiliser pour la décoration.

Syntaxe formelle

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

Exemples

CSS

.under {
  text-decoration: underline red;
}

.over {
  text-decoration: wavy overline lime;
}

.line {
  text-decoration: line-through;
}

.plain {
  text-decoration: none;
}

.underover {
  text-decoration: dashed underline overline;
}

.blink {
  text-decoration: blink;
}

HTML

<p class="under">Ce texte a une ligne en dessous.</p>
<p class="over">Ce texte a une ligne au dessus.</p>
<p class="line">Ce texte est barré d'une ligne.</p>
<p>Ce <a class="plain" href="#">lien ne sera pas souligné</a>,
    comme les liens le sont normalement. Attention à ces décorations
    sur les ancres cars le soulignement sert souvent d'indication pour
    un hyperlien.</p>
<p class="underover">Ce texte a des lignes en dessous et au dessus.</p>
<p class="blink">Ce texte peut clignoter selon le navigateur utilisé.</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.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
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 pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung 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 Support complet 12
Notes
Support complet 12
Notes
Notes The blink value does not have any effect.
Firefox Support complet 23
Notes
Support complet 23
Notes
Notes The blink value does not have any effect.
Support complet 1
IE Support complet Oui
Notes
Support complet Oui
Notes
Notes The blink value does not have any effect.
Opera Support complet 15
Notes
Support complet 15
Notes
Notes The blink value does not have any effect.
Support complet 4
Safari Support complet Oui
Notes
Support complet Oui
Notes
Notes The blink value does not have any effect.
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 Support complet Oui
Notes
Support complet Oui
Notes
Notes The blink value does not have any effect.
Firefox Android Support complet 23
Notes
Support complet 23
Notes
Notes The blink value does not have any effect.
Support complet 4
Opera Android Support complet 4
Notes
Support complet 4
Notes
Notes The blink value does not have any effect.
Safari iOS Support complet Oui
Notes
Support complet Oui
Notes
Notes The blink value does not have any effect.
Samsung Internet Android Support complet 7.0
ShorthandChrome ? Edge Aucun support NonFirefox Support complet 36
Support complet 36
Support partiel 6
IE Aucun support NonOpera Aucun support NonSafari Support complet Oui
Notes
Support complet Oui
Notes
Notes Safari doesn't support text-decoration-style.
WebView Android ? Chrome Android ? Edge Mobile Aucun support NonFirefox Android Support complet 36
Support complet 36
Support partiel 6
Opera Android ? Safari iOS Support complet 8
Notes
Support complet 8
Notes
Notes Safari doesn't support text-decoration-style.
Samsung Internet Android ?

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.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, 316k, FredB, Fredchat, Kyodev
Dernière mise à jour par : SphinxKnight,