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>

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

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.

Support de Navigateurs

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Pratiquez vos connaissances

Quelle propriété CSS est utilisée pour contrôler l'apparence du texte sous-ligné, biffé et surligné?
Trouvez-vous cela utile?