text-decoration

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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.

Exemple interactif

Ces décorations se propagent sur les différents éléments enfants. 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

css
/* 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.

Définition formelle

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
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

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

<text-decoration-line> =
none |
[ underline || overline || line-through || blink ]

<text-decoration-style> =
solid |
double |
dotted |
dashed |
wavy

<text-decoration-color> =
<color>

Exemples

CSS

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

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

Specification
CSS Text Decoration Module Level 3
# text-decoration-property
Scalable Vector Graphics (SVG) 2
# TextDecorationProperties

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration
text-decoration-color and text-decoration-style included in shorthand
text-decoration-thickness included in shorthand

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.

Voir aussi