W3docs
fr
Se connecter

Propriété CSS text-decoration-line

Use the text-decoration CSS shorthand property to specify the kind of line to use for text decoration. See property values and try examples.

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

La propriété text-decoration-line fait partie des propriétés CSS3.

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

info

La propriété text-decoration-line est entièrement prise en charge dans tous les navigateurs modernes sans préfixes fournisseurs.

Valeur initialenone
S'applique àTous les éléments. Elle s'applique également à ::first-letter et ::first-line.
HéritéeNon.
AnimableNon.
VersionCSS3
Syntaxe DOMobject.style.textDecorationLine = "overline underline";

Syntaxe

Syntaxe CSS text-decoration-line

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

Exemple de la propriété text-decoration-line :

Exemple de code CSS text-decoration-line

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration-line: overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Essayez vous-même »

Résultat

CSS text-decoration-line Property

Exemple de la propriété text-decoration-line avec la valeur "underline" :

Exemple de CSS text-decoration-line avec la valeur underline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration-line: underline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété text-decoration-line avec la valeur "line-through" :

Exemple de CSS text-decoration-line avec la valeur line-through

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-decoration-line: line-through;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <p>Lorem Ipsum is simply dummy text...</p>
  </body>
</html>
Essayez vous-même »

Exemple de la propriété text-decoration-line avec toutes les valeurs :

Exemple de toutes les valeurs CSS text-decoration-line

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 20px 0;
      }
      div.t1 {
        text-decoration-line: none;
      }
      div.t2 {
        text-decoration-line: underline;
      }
      div.t3 {
        text-decoration-line: line-through;
      }
      div.t4 {
        text-decoration-line: overline;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-line property example</h2>
    <div class="t1">
      Lorem Ipsum is simply dummy text...
    </div>
    <div class="t2">
      Lorem Ipsum is simply dummy text...
    </div>
    <div class="t3">
      Lorem Ipsum is simply dummy text...
    </div>
    <div class="t4">
      Lorem Ipsum is simply dummy text...
    </div>
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescriptionEssayer »
noneAucune ligne n'est spécifiée.Essayer »
underlineSpécifie une ligne sous le texte.Essayer »
overlineSpécifie une ligne au-dessus du texte.Essayer »
line-throughSpécifie une ligne barrée à travers le texte.Essayer »
initialDéfinit la valeur par défaut de la propriété.Essayer »
inheritHérite la propriété de son élément parent.

La propriété text-decoration-line prenait précédemment en charge une valeur blink qui faisait clignoter le texte, mais cette valeur est désormais obsolète.

Pratique

Pratique

Lesquelles de ces valeurs sont valides pour la propriété 'text-decoration-line' en CSS ?