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

cssSelektor {
  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:

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

css#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:

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

css#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:

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

Результат: