Proprietà text-decoration-style

La proprietà text-decoration-style cambia il tipo di linea per il testo: linea singola, doppia, a punti, a trattini, linea ondulata.

La proprietà dovrebbe essere utilizzata insieme alle proprietà text-decoration-line e text-decoration-color. Queste proprietà estendono l'azione della proprietà text-decoration, essendo analoghi più avanzati.

Sintassi

cssselettore {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Valori

Valore Descrizione
solid Linea continua.
double Linea doppia.
dotted Linea a punti.
dashed Linea a trattini.
wavy Linea ondulata.

Valore predefinito: solid.

Esempio . Valore wavy

Ora il testo diventerà sottolineato con una linea ondulata rossa:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Esempio . Valore dotted

Ora il testo diventerà sottolineato con una linea a punti rossa:

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Esempio . Valore double

Ora il testo diventerà barrato con una linea doppia rossa:

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

Результат: