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

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

<div>
  <span style = "text-decoration: underline;">underline</span>
  <span style = "text-decoration: red wavy underline;">red wavy underline</span>
  <span style = "text-decoration: underline overline blue;">underline overline blue</span>
</div>

* {
  box-sizing: border-box;
}

div {
  border: 5px solid #F4F7F8;
}

span {
  font-family: monospace;
  margin: 0.5em;
  padding: 1em 0;
  display:inline-block;
  font-size: 1.2em;
}

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

Syntaxe

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

Compatibilité des navigateurs

[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>.
• Les propriétés détaillées associées à cette propriété raccourcie :
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style.