Propriété text-decoration-style

La propriété text-decoration-style modifie le type de ligne de texte : ligne simple, double, en pointillés, en tirets, ligne ondulée.

La propriété doit être utilisée conjointement avec les propriétés text-decoration-line et text-decoration-color. Ces propriétés étendent l'action de la propriété text-decoration, étant des analogues plus avancés.

Syntaxe

csssélecteur {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Valeurs

Valeur par défaut : solid.

Exemple . Valeur wavy

Maintenant le texte deviendra souligné avec une ligne ondulée rouge :

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Exemple . Valeur dotted

Maintenant le texte deviendra souligné avec une ligne en pointillés rouge :

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Exemple . Valeur double

Maintenant le texte deviendra barré avec une ligne double rouge :

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>

css#elem {
  text-decoration-style: double;
  text-decoration-color: red;
  text-decoration-line: line-through;
}

Результат: