text-decoration

Zuletzt aktualisiert am 15. Februar 2026

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.

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 <p> erstreckt sich auch über <span>-Elemente darin, selbst wenn du auf dem <span> 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

text-decoration-line

text-decoration-style

text-decoration-color, thickness, offset

Beispiele

Linienarten im Überblick

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

.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>

Link-Unterstreichung entfernen und anpassen

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

/* 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>

Durchgestrichener Preis

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

.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>

Dekorative Unterstreichung mit Offset

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

.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 Fehlmarkierung

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

.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 <span> 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

• text-decoration: none auf Kindelementen funktioniert nicht wie erwartet: Eine Unterstreichung auf dem Elternelement propagiert auf alle Kinder. text-decoration: none auf einem <span> innerhalb eines <a> entfernt die Linie nicht. Setze stattdessen display: inline-block auf das Kindelement.
• 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.
• 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.
• 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.
• 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.
• 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

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.

Email-Kompatibilität

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

Verwandte Eigenschaften