Eigenschaft text-decoration-style

Die Eigenschaft text-decoration-style ändert den Linientyp von Text: einfache Linie, doppelte Linie, gepunktete Linie, gestrichelte Linie, wellige Linie.

Die Eigenschaft sollte zusammen mit den Eigenschaften text-decoration-line und text-decoration-color verwendet werden. Diese Eigenschaften erweitern die Wirkung der Eigenschaft text-decoration und sind deren erweiterte Pendants.

Syntax

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

Werte

Wert	Beschreibung
`solid`	Durchgezogene Linie.
`double`	Doppelte Linie.
`dotted`	Gepunktete Linie.
`dashed`	Gestrichelte Linie.
`wavy`	Wellenförmige Linie.

Standardwert: solid.

Beispiel . Wert wavy

Der Text wird jetzt mit einer roten wellenförmigen Linie unterstrichen:

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

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

Beispiel . Wert dotted

Der Text wird jetzt mit einer roten gepunkteten Linie unterstrichen:

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

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

Beispiel . Wert double

Der Text wird jetzt mit einer roten doppelten Linie durchgestrichen:

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

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