Propriété CSS text-decoration

La propriété text-decoration définit la décoration du texte.

En CSS3, c'est une raccourcie pour les propriétés suivantes:

Si la valeur de l'une de ses propriétés est absente, la valeur par défaut sera définie automatiquement. La text-decoration-line est requise.

En spécification CSS1, text-decoration n'était pas une raccourcie et avait les valeur suivantes:

none
underline
overline
line-through
blink

Valeur initiale	none currentColor solid
Appliquée à	Tous les éléments. Elle est aussi appliquée à ::first-letter et ::first-line.
Héritée	Non.
Animable	Non.
Version	CSS1, CSS3
Syntaxe DOM	object.style.textDecoration = "dashed";

Syntaxe

text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .a {
      text-decoration: overline;
      }
      .b {
      text-decoration: line-through;
      }
      .c {
      text-decoration: underline;
      }
      .d {
      text-decoration: underline overline;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration</h2>
    <p class="a">Lorem Ipsum est simplement du faux texte...</p>
    <p class="b">Lorem Ipsum est simplement du faux texte...</p>
    <p class="c">Lorem Ipsum est simplement du faux texte...</p>
    <p class="d">Lorem Ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Un autre exemple dans lequel la couleur du texte est spécifiée:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      p {
      text-decoration: underline;
      -webkit-text-decoration-color: #1c87c9; /* Safari */  
      text-decoration-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration</h2>
    <p>Lorem Ipsum est simplement du faux texte...</p>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, l'extension -webkit- est utilisée pour Safari.

Un exemple dans lequel le style du texte est spécifié:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
      text-decoration-line: underline;
      }
      div.t1 {
      text-decoration-style: dotted;
      }
      div.t2 {
      text-decoration-style: wavy;
      }
      div.t3 {
      text-decoration-style: solid;
      }
      div.t4 {
      text-decoration-line: overline underline;
      text-decoration-style: double;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration</h2>
    <div class="t1">Lorem ipsum est simplement du faux texte...</div>
    <br>
    <div class="t2">Lorem ipsum est simplement du faux texte...</div>
    <br>
    <div class="t3">Lorem ipsum est simplement du faux texte...</div>
    <br>
    <div class="t4">Lorem ipsum est simplement du faux texte...</div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
text-decoration-line	Spécifie le type de la décoration du texte.
text-decoration-color	Spécifie la couleur de la décoration du texte.
text-decoration-style	Spécifie le style de la décoration du texte.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.