Właściwość text-decoration-style

Właściwość text-decoration-style zmienia typ linii tekstu: pojedyncza linia, podwójna, w postaci kropek, w postaci kresek, linia falista.

Właściwość należy stosować łącznie z właściwościami text-decoration-line i text-decoration-color. Te właściwości rozszerzają działanie właściwości text-decoration, stanowiąc bardziej zaawansowane analogi.

Składnia

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

Wartość domyślna: solid.

Teraz tekst stanie się podkreślony czerwoną falistą linią:

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

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

Teraz tekst stanie się podkreślony czerwoną linią w postaci kropek:

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

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

Teraz tekst stanie się przekreślony czerwoną podwójną linią:

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

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