Übersicht

Die text-decoration CSS Eigenschaft wird dazu verwendet, die Textformatierung auf underline, overline, line-through oder blink zu setzen. Unter- und Überstrichdekorationen werden unterhalb des Texts positioniert, Durchstreichungen über dem Text.

Textdekorationen werden auf Unterelemente gezeichnet. Das bedeutet, dass es nicht möglich ist, die Textdekoration, die für ein übergeordnetes Element angegeben wurde, für ein Unterelement zu deaktivieren. Zum Beispiel würde in folgendem Markup <p>Dieser Text hat <em>ein paar hervorgehobene Wörter</em>.</p> die Stilregel p { text-decoration: underline; } den gesamten Absatz unterstreichen. Die Stilregel em { text-decoration: none; } würde nichts ändern; der gesamte Absatz wäre immer noch unterstrichen. Jedoch würde die Regel em { text-decoration: overline; } eine zweite Dekoration für "ein paar hervorgehobene Wörter" erscheinen lassen.

Hinweis: CSS Text Decoration Level 3 hat diese Eigenschaft zu einer Kurzschreibweise für die drei neuen CSS Eigenschaften text-decoration-color, text-decoration-line und text-decoration-style gemacht. Wie für andere Kurzschreibweiseeigenschaften bedeutet dies, dass sie deren Werte auf deren Standardwerte zurücksetzt, falls diese nicht explizit in der Kurzschreibweiseeigenschaft angegeben sind.

Initialwertwie die jeweiligen Kurzschreibweisen:
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Medienvisuell
Berechneter Wertwie die jeweiligen Kurzschreibweisen:
Animationstypwie die jeweiligen Kurzschreibweisen:
Kanonische ReihenfolgeReihenfolge des Auftretens in der formalen Grammatik der Werte

Syntax

/* Schlüsselwortwerte */
text-decoration: none;                 /* Keine Textdekoration */
text-decoration: underline red;        /* Rote Unterstreichung */
text-decoration: underline wavy red;   /* Rote gewellte Unterstreichung */

/* Globale Werte */
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

Werte

Die text-decoration Eigenschaft ist eine Kurzschreibweise und kann die Werte jeder der drei Langschreibweiseeigenschaften annehmen: text-decoration-line, text-decoration-color und text-decoration-style

Formale Syntax

<'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

Beispiele

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

Spezifikationen

Spezifikation Status Kommentar
CSS Text Decoration Module Level 3
Die Definition von 'text-decoration' in dieser Spezifikation.
Anwärter Empfehlung Hat die Eigenschaft in eine Kurzschreibweiseeigenschaft ungewandelt. Unterstützung für den Wert von text-decoration-style wurde hinzugefügt.
CSS Level 2 (Revision 1)
Die Definition von 'text-decoration' in dieser Spezifikation.
Empfehlung Keine wesentlichen Änderungen
CSS Level 1
Die Definition von 'text-decoration' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 3Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung JaSamsung Internet Android Vollständige Unterstützung Ja
blink
Veraltet
Chrome Vollständige Unterstützung 57
Hinweise
Vollständige Unterstützung 57
Hinweise
Hinweise The blink value does not have any effect.
Edge Vollständige Unterstützung 12
Hinweise
Vollständige Unterstützung 12
Hinweise
Hinweise The blink value does not have any effect.
Firefox Vollständige Unterstützung 23
Hinweise
Vollständige Unterstützung 23
Hinweise
Hinweise The blink value does not have any effect.
Vollständige Unterstützung 1
IE Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise The blink value does not have any effect.
Opera Vollständige Unterstützung 15
Hinweise
Vollständige Unterstützung 15
Hinweise
Hinweise The blink value does not have any effect.
Vollständige Unterstützung 4
Safari Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise The blink value does not have any effect.
WebView Android Vollständige Unterstützung 57
Hinweise
Vollständige Unterstützung 57
Hinweise
Hinweise The blink value does not have any effect.
Chrome Android Vollständige Unterstützung 57
Hinweise
Vollständige Unterstützung 57
Hinweise
Hinweise The blink value does not have any effect.
Edge Mobile Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise The blink value does not have any effect.
Firefox Android Vollständige Unterstützung 23
Hinweise
Vollständige Unterstützung 23
Hinweise
Hinweise The blink value does not have any effect.
Vollständige Unterstützung 4
Opera Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise The blink value does not have any effect.
Safari iOS Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise The blink value does not have any effect.
Samsung Internet Android Vollständige Unterstützung 7.0
ShorthandChrome ? Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 36
Vollständige Unterstützung 36
Teilweise Unterstützung 6
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Vollständige Unterstützung Ja
Hinweise
Vollständige Unterstützung Ja
Hinweise
Hinweise Safari doesn't support text-decoration-style.
WebView Android ? Chrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 36
Vollständige Unterstützung 36
Teilweise Unterstützung 6
Opera Android ? Safari iOS Vollständige Unterstützung 8
Hinweise
Vollständige Unterstützung 8
Hinweise
Hinweise Safari doesn't support text-decoration-style.
Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch

  • Das list-style Attribut steuert die Darstellung von Einträgen in HTML <ol> und <ul> Listen.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Sebastianz, fscholz, Jürgen Jeka, Michael2402
Zuletzt aktualisiert von: SJW,