text-decoration-line

Die Eigenschaft text-decoration-line dekoriert Text mit einem Unterstrich, Oberstrich, Durchstreichen oder einer Kombination dieser Linien.

p {
  text-decoration-line: underline;
}

Werte

• none: Es wird keine Linie hinzugefügt und bestehende Linien werden entfernt – z. B. entfernt none den Standard-Unterstrich von Links.
• underline: Fügt einen 1px Unterstrich unter dem Text hinzu.
• overline: Fügt einen 1px Oberstrich über dem Text hinzu.
• line-through: Fügt eine 1px Linie durch den Text.
• inherit: Erbt die Dekoration des Elternelements.

Der Wert blink ist in der W3C-Spezifikation enthalten, ist aber veraltet und funktioniert in keinem aktuellen Browser. Als er funktionierte, ließ er den Text durch schnelles Wechseln zwischen 0 % und 100 % Deckkraft „blinken“.

Kombination von Werten

Sie können die Werte underline, overline oder line-through in einer durch Leerzeichen getrennten Liste kombinieren, um mehrere Dekorationslinien hinzuzufügen.

p {
  text-decoration-line: overline underline line-through;
}

Verwendung

Die Eigenschaft text-decoration-line ist praktisch identisch mit der ursprünglichen Eigenschaft text-decoration. Wenn Sie nur eine oder mehrere Linien zu Ihrem Text hinzufügen möchten, ist text-decoration die bessere Wahl, da sie von jedem Browser, auch sehr alten, unterstützt wird. Im Allgemeinen ist die Verwendung einer text-decoration-line-Deklaration nur sinnvoll, wenn Sie eine Longhand-Regel schreiben, die text-decoration-style oder eine text-decoration-color-Deklaration enthält. Wenn Sie alle drei zusammen verwenden möchten, können Sie die Kurzschreibweise text-decoration verwenden.

Kurzschreibweise

text-decoration-line kann in Kombination mit text-decoration-style und text-decoration-color in der Kurzschreibweise CSS3 text-decoration verwendet werden (derzeit wird dies nur von Firefox vollständig unterstützt).

.underlined {
  text-decoration: underline dotted red;
}

Demo

Diese Demo funktioniert in Safari, Firefox und Chrome mit aktivierten experimentellen Webplattform-Funktionen. Der Wert blink ist nicht enthalten.

Weitere Informationen

• text-decoration-line in der W3C-Spezifikation
• text-decoration-line bei MDN

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
31 * †	7.1 *	6 ‡	Keine	Keine	Keine	8 *

* mit -webkit Präfix
† mit aktiviertem experimentellen Webplattform-Flag
‡ 6 – 35 mit -moz Präfix, unprefixed ab 36.

Verwandt