w3docs logo

Propriété CSS text-decoration-line

La propriété text-decoration-line spécifie le type de la ligne qui sera utilisée pour la décoration du texte.

La propriété text-decoration-line accepte une ou plusieurs valeurs.

En plus des valeurs mentionnées ci-dessous, la propriété text-decoration-line avait une valeur "blink" qui faisait clignoter le texte. Cette valeur est obsolète.

L'extension -webkit- pour Safari est utilisée avec la propriété text-decoration-line.
Valeur initiale none
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.textDecorationLine = "overline underline";

Syntaxe

text-decoration-line: none | underline | overline | line-through | initial | inherit;

Exemple

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

Un exemple avec la valeur "underline" :

Exemple

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

Un autre exemple avec la valeur "line-through" :

Exemple

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

Dans cet exemple, tous les valeurs sont spécifiées:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div.t1 {
      -webkit-text-decoration-line: none; /* Safari */
      text-decoration-line: none; 
      }
      div.t2 {
      -webkit-text-decoration-line: underline; /* Safari */
      text-decoration-line: underline; 
      }
      div.t3 {
      -webkit-text-decoration-line: line-through; /* Safari */
      text-decoration-line: line-through; 
      }
      div.t4 {
      -webkit-text-decoration-line: overline; /* Safari */
      text-decoration-line: overline; 
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété text-decoration-line</h2>
    <div class="t1">Le Lorem Ipsum est simplement du faux texte...</div>
    <br>
    <div class="t2">Le Lorem Ipsum est simplement du faux texte...</div>
    <br>
    <div class="t3">Le Lorem Ipsum est simplement du faux texte...</div>
    <br>
    <div class="t4">Le Lorem Ipsum est simplement du faux texte...</div>
  </body>
</html>

Valeurs

Value Description
none Aucune ligne n'est spécifiée.
underline Spécifie une ligne sous le texte.
overline Spécifie une ligne en haut de texte.
line-through Spécifie une ligne à travers le texte.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome firefox safari opera
57.0+ 36.0+ 12.1+ ✓

Pratiquez vos connaissances

Quelles sont les valeurs possibles pour la propriété 'text-decoration-line' en CSS ?
Trouvez-vous cela utile?