text-decoration

text-decoration ist die Shorthand-Eigenschaft für Textdekorationen wie Unterstreichungen, Überstreichungen und Durchstreichungen. Sie fasst text-decoration-line, text-decoration-style, text-decoration-color und text-decoration-thickness zusammen. Der Browser setzt Links standardmäßig auf underline, und mit text-decoration: none kannst du das entfernen. Die Eigenschaft bietet dir volle Kontrolle über Linientyp, Stil, Farbe, Dicke und Abstand zum Text.

Steckbrief text-decoration

Syntax: text-decoration: <line> || <style> || <color> || <thickness>
Initialwert: none
Vererbt: Nein
Animierbar: Ja
Kurzform für: text-decoration-line, text-decoration-style, text-decoration-color, text-decoration-thickness

Kategorie: Typografie
Werte: 15
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

text-decoration ist eine Shorthand-Eigenschaft, die bis zu vier Werte in einer Zeile kombiniert: die Linienart (underline, line-through, overline), den Linienstil (solid, dashed, dotted, double, wavy), die Farbe und die Dicke. Du kannst die Werte in beliebiger Reihenfolge angeben, solange text-decoration-line enthalten ist.

Im Gegensatz zu den meisten CSS-Eigenschaften wird text-decoration nicht im klassischen Sinne vererbt. Stattdessen werden Dekorationen auf Kindelemente “propagiert”: Eine Unterstreichung auf einem  erstreckt sich auch über -Elemente darin, selbst wenn du auf dem  explizit text-decoration: none setzt. Dieses Verhalten überrascht viele Entwickler. Nur wenn du das Kindelement auf display: inline-block setzt, bricht die Propagation.

text-underline-offset ist keine Unter-Eigenschaft der Shorthand, sondern eine eigenständige Eigenschaft. Sie steuert den Abstand zwischen der Unterstreichung und dem Text. Das ist besonders nützlich, um Unterstreichungen optisch ansprechender zu gestalten und Überschneidungen mit Unterlängen (g, p, y) zu vermeiden.

Syntax & Werte

15 Werte

text-decoration-line

Wert	Beschreibung	Beispiel
`none`	Keine Dekoration (Standard).	text-decoration-line: none
`underline`	Linie unter dem Text.	text-decoration-line: underline
`overline`	Linie über dem Text.	text-decoration-line: overline
`line-through`	Linie durch den Text (Durchstreichung).	text-decoration-line: line-through
`underline overline`	Mehrere Linien kombinieren.	text-decoration-line: underline overline

text-decoration-style

Wert	Beschreibung	Beispiel
`solid`	Durchgezogene Linie (Standard).	text-decoration-style: solid
`double`	Doppelte Linie.	text-decoration-style: double
`dotted`	Gepunktete Linie.	text-decoration-style: dotted
`dashed`	Gestrichelte Linie.	text-decoration-style: dashed
`wavy`	Wellenförmige Linie.	text-decoration-style: wavy

text-decoration-color, thickness, offset

Wert	Beschreibung	Beispiel
`<color>`	Farbe der Dekoration. Standardmäßig die aktuelle Textfarbe.	text-decoration-color: #3b82f6
`<length>`	Dicke der Linie.	text-decoration-thickness: 2px
`from-font`	Dicke wird von der Schriftmetrik bestimmt.	text-decoration-thickness: from-font
`auto`	Browser bestimmt die Dicke automatisch.	text-decoration-thickness: auto
`<length> (offset)`	Abstand der Unterstreichung vom Text.	text-underline-offset: 4px

Beispiele

5 Beispiele

Die verschiedenen Linienarten und Stile von text-decoration im direkten Vergleich.

Linienarten im Überblick

.underline    { text-decoration: underline; }
.overline     { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.wavy         { text-decoration: underline wavy #3b82f6; }
.double       { text-decoration: underline double; }

<div class="deco-demo">
<div class="d-under"><div class="label">underline</div>Unterstrichener Text</div>
<div class="d-over"><div class="label">overline</div>Überstrichener Text</div>
<div class="d-through"><div class="label">line-through</div>Durchgestrichener Text</div>
<div class="d-wavy"><div class="label">underline wavy (blau)</div>Wellenförmige Unterstreichung</div>
<div class="d-double"><div class="label">underline double</div>Doppelte Unterstreichung</div>
</div>

Ein typisches Anwendungsbeispiel: Die Standard-Unterstreichung von Links entfernen und durch eine eigene ersetzen, die beim Hover erscheint.

Link-Unterstreichungen anpassen

/* Standard-Unterstreichung entfernen */
a { text-decoration: none; }

/* Eigene Unterstreichung mit Abstand und Farbe */
a {
  text-decoration: underline;
  text-decoration-color: #3b82f6;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Hover-Effekt */
a:hover {
  text-decoration-color: currentColor;
}

<div class="link-demo">
<div><div class="label">Standard</div><a href="#" class="l-default">Link mit Standard-Unterstreichung</a></div>
<div><div class="label">text-decoration: none</div><a href="#" class="l-none">Link ohne Unterstreichung</a></div>
<div><div class="label">border-bottom Alternative</div><a href="#" class="l-custom">Link mit border-bottom</a></div>
<div><div class="label">Custom underline mit offset</div><a href="#" class="l-offset">Link mit Abstand und Farbe</a></div>
</div>

Ein klassisches E-Commerce-Pattern: Der alte Preis wird durchgestrichen und der neue Preis farblich hervorgehoben.

Durchgestrichener Preis

.price-old {
  text-decoration: line-through;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2px;
  color: #94a3b8;
}

<div class="price-demo">
<span class="price-old">49,99 €</span>
<span class="price-new">29,99 €</span>
<span class="price-badge">-40%</span>
</div>

text-underline-offset verschiebt die Unterstreichung vom Text weg. In Kombination mit Farbe und Dicke entstehen ansprechende, moderne Link-Styles.

Unterstreichung mit verschiedenen Offsets

.subtle-underline {
  text-decoration: underline;
  text-decoration-color: #3b82f6;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

<div class="offset-demo">
<div class="o-default"><div class="label">Ohne offset</div>Text mit Standard-Unterstreichung</div>
<div class="o-small"><div class="label">text-underline-offset: 3px</div>Text mit leichtem Abstand</div>
<div class="o-large"><div class="label">text-underline-offset: 6px</div>Text mit großem Abstand</div>
</div>

Wellenförmige Unterstreichungen (wavy) eignen sich perfekt, um Fehler oder Warnungen zu markieren, ähnlich wie in Texteditoren.

Wellenförmige Fehlermarkierung

.error   { text-decoration: underline wavy #ef4444; }
.warning { text-decoration: underline wavy #f59e0b; }
.info    { text-decoration: underline wavy #3b82f6; }

<div class="wavy-demo">
Der Text enthält einen <span class="error">Retchtschreibfehler</span> und eine <span class="warning">fragwürdige Formulierung</span> sowie einen <span class="info">Verbesserungsvorschlag</span>.
</div>

Barrierefreiheit

Entferne nie die Unterstreichung von Links, ohne einen gleichwertigen visuellen Hinweis zu bieten. Die WCAG-Richtlinie 1.4.1 verlangt, dass Links nicht allein durch Farbe erkennbar sind. Wenn du text-decoration: none auf Links setzt, brauchen sie einen anderen visuellen Indikator wie eine abweichende Schriftstärke, ein Icon oder eine sichtbare Unterstreichung beim Hover. Im Fließtext sollten Links immer unterstrichen sein, damit sie auch für farbenblinde Nutzer erkennbar bleiben.

Verwende <del> statt reines CSS-line-through für semantisch gelöschten Text. Screenreader erkennen <del> und können den Nutzer darauf hinweisen, dass der Text gestrichen ist. Reines text-decoration: line-through auf einem  ist rein visuell und wird von Screenreadern ignoriert. Für Preisänderungen ist <del> semantisch korrekt und barrierefreier.

Achte auf ausreichend Kontrast zwischen der Dekorationsfarbe und dem Hintergrund. Eine hellblaue Unterstreichung auf weißem Hintergrund kann für Nutzer mit Sehbeeinträchtigungen schwer erkennbar sein. Die text-decoration-thickness sollte mindestens 1.5px bis 2px betragen, damit die Linie gut sichtbar ist.

Häufige Fehler

6 Fehler

01 text-decoration: none auf Kindelementen funktioniert nicht wie erwartet

Eine Unterstreichung auf dem Elternelement propagiert auf alle Kinder. text-decoration: none auf einem  innerhalb eines <a> entfernt die Linie nicht. Setze stattdessen display: inline-block auf das Kindelement.

02 Unterstreichung von Links entfernen ohne Ersatz

a { text-decoration: none; } ohne visuellen Ersatz macht Links im Fließtext unerkennbar. Farbe allein reicht nicht als Unterscheidungsmerkmal.

03 text-underline-offset in der Shorthand verwenden

text-underline-offset ist keine Unter-Eigenschaft der Shorthand. Du musst sie separat deklarieren: text-underline-offset: 4px.

04 text-decoration-thickness in älteren Browsern

text-decoration-thickness wird erst seit 2020/2021 breit unterstützt. Ältere Browser ignorieren den Wert und verwenden die Standard-Dicke.

05 border-bottom statt text-decoration für Unterstreichungen

border-bottom sitzt unter dem Padding, nicht direkt am Text. Der Abstand ist schwerer zu kontrollieren als mit text-underline-offset. Für einfache Unterstreichungen ist text-decoration die bessere Wahl.

06 Mehrere text-decoration-line Werte mit Komma statt Leerzeichen

text-decoration-line: underline, overline ist falsch. Mehrere Werte werden durch Leerzeichen getrennt: text-decoration-line: underline overline.

Browser-Kompatibilität

5 von 5

text-decoration als Shorthand und text-decoration-line werden von allen Browsern vollständig unterstützt. text-decoration-thickness und text-underline-offset werden seit 2020/2021 von allen modernen Browsern unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

text-decoration-line (underline, line-through) funktioniert in allen Email-Clients. Die erweiterten Eigenschaften (thickness, style, color, offset) werden nur teilweise unterstützt.

Apple Mail

Komplett
Gmail

Teilweise

underline und line-through funktionieren. thickness, style und offset werden ignoriert
Outlook

Teilweise

Nur underline und line-through. Farbe und Stil werden nicht unterstützt
Thunderbird

Komplett
Yahoo Mail

Teilweise

underline und line-through funktionieren. Erweiterte Eigenschaften eingeschränkt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da