Propriété text-decoration-line

La propriété text-decoration-line définit la position de la ligne de décoration du texte. Cette propriété doit être utilisée conjointement avec les propriétés text-decoration-style et text-decoration-color. Ces propriétés étendent la fonctionnalité de la propriété text-decoration, en étant des analogues plus avancés.

Syntaxe

csssélecteur {
  text-decoration-line: underline | line-through | overline | none;
}

Valeurs

Valeur	Description
`underline`	Rend le texte souligné.
`line-through`	Rend le texte barré.
`overline`	Place une ligne au-dessus du texte.
`none`	Supprime la décoration d'un élément souligné. Est le plus souvent utilisé pour les liens, car ils sont soulignés par défaut.

Valeur par défaut : none. Pour les liens la valeur par défaut est : underline.

Exemple

Barrons le texte avec une ligne rouge :

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

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

Результат: