text-decoration

Exemple interactif

text-decoration: underline;

text-decoration: underline dotted;

text-decoration: underline dotted red;

text-decoration: green wavy underline;

text-decoration: underline overline #ff3028;

<section id="default-example">
  <p>
    Je préférerais de loin être
    <span class="transition-all" id="example-element"
      >heureux que d'avoir raison</span
    >
    chaque jour.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

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

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness

Syntaxe

/* Valeurs avec mots-clés */
text-decoration: underline;
text-decoration: overline red;
text-decoration: none;

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

La propriété text-decoration est définie comme une ou plusieurs valeurs séparées par des espaces représentant les différentes propriétés longues de text-decoration.

Valeurs

text-decoration-line

Définit le type de décoration utilisée, comme underline ou line-through.

text-decoration-color

Définit la couleur de la décoration.

text-decoration-style

Définit le style de la ligne utilisée pour la décoration, comme solid, wavy ou dashed.

text-decoration-thickness

Définit l'épaisseur de la ligne utilisée pour la décoration.

Définition formelle

Syntaxe formelle

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

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

<text-decoration-thickness> = 
  auto                 |
  from-font            |
  <length-percentage>  |
  <line-width>         

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

<text-decoration-color> = 
  <color>  

<length-percentage> = 
  <length>      |
  <percentage>  

<line-width> = 
  <length [0,∞]>  |
  hairline        |
  thin            |
  medium          |
  thick           

Exemples

Démonstration des valeurs de text-decoration

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

.thick {
  text-decoration: solid underline purple 4px;
}

.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="thick">
  Ce texte a une ligne en dessous très épaisse et violette dans les navigateurs
  compatibles.
</p>
<p class="blink">Ce texte peut clignoter selon le navigateur utilisé.</p>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés individuelles de text-decoration sont text-decoration-line, text-decoration-color, text-decoration-style et text-decoration-thickness.
• Les propriétés text-decoration-skip-ink, text-underline-offset et text-underline-position affectent également la décoration du texte, mais ne sont pas incluses dans la propriété raccourcie.
• La propriété list-style contrôle l'apparence des éléments dans les listes HTML <ol> et <ul>.
• L'attribut SVG text-decoration