Text-Decoration

text-decoration ist eine Shorthand-Eigenschaft für mehrere Untereigenschaften. Sie ermöglicht Unterstreichungen, Überstreichungen, Durchstreichungen mit voller Kontrolle über Farbe, Stil und Dicke.

a {
  text-decoration: underline wavy red 2px;
}

Eigenschaften

text-decorationKurzschreibweise
text-decoration-linePosition der Linie
text-decoration-styleArt der Linie
text-decoration-colorFarbe der Linie
text-decoration-thicknessDicke der Linie

1. Kurzschreibweise

Mit text-decoration lassen sich Linie, Stil, Farbe und Dicke in einer Deklaration kombinieren.

text-decoration: underline wavy red 2px;

Nicht angegebene Werte verwenden ihre Standardwerte. text-underline-offset und text-decoration-skip-ink müssen separat geschrieben werden.

2. text-decoration-line

Bestimmt, wo die Linie erscheint.

noneKeine Dekoration (Standard)
underline
Unterstreichung
overline
Überstreichung (Linie über dem Text)
line-through
Durchstreichung

Über- und Unterstrichen kombiniert

The quick brown fox jumps over the lazy dog.

text-decoration: underline overline;

3. text-decoration-style

Bestimmt, wie die Linie aussieht.

solid
Durchgezogene Linie (Standard)
double
Doppelte Linie
dotted
Gepunktete Linie
dashed
Gestrichelte Linie
wavy
Wellenförmige Linie

The quick brown fox jumps.

text-decoration: line-through wavy;

4. text-decoration-color

Bestimmt die Farbe der Linie, unabhängig von der Textfarbe.

Roter Underline, schwarzer Text

text-decoration: underline red;

Wellige rote Unterstreichung

text-decoration: underline wavy red;

Light und Dark Mode

Mit light-dark() passt sich die Farbe der Linie automatisch an das Farbschema an.

:root {
  color-scheme: light dark;
}

a {
  text-decoration-color: light-dark(darkblue, lightskyblue);
}

text-decoration: underline solid 3px light-dark(darkblue, red);

5. text-decoration-thickness

Bestimmt die Dicke der Linie.

Hauchdünne Linie

text-decoration: underline solid 1px;

Mittlere Linie

text-decoration: underline solid 3px;

Dicke rote Linie

text-decoration: underline red 5px;

Flexible Dicke mit clamp()

Mit clamp() kann sich die Dicke der Linie flexibel anpassen, ohne zu dünn oder zu dick zu werden.

text-decoration-thickness: clamp(1px, 0.08em, 4px);

text-decoration: underline solid hotpink clamp(1px, 0.08em, 4px);

text-underline-offset

Bestimmt den Abstand zwischen Text und Unterstreichung.

Kleiner Abstand

text-decoration: underline;
text-underline-offset: 2px;

Mittlerer Abstand

text-decoration: underline wavy red;
text-underline-offset: 5px;

Grosser Abstand, dicke pink Linie

text-decoration: underline pink 3px;
text-underline-offset: 10px;

Praxis-Tipp für Links: Moderne Websites verwenden oft text-underline-offset, damit die Unterstreichung nicht zu nah am Text klebt.

a {
  text-decoration: underline 2px;
  text-underline-offset: 3px;
}

text-decoration-skip-ink

text-decoration-skip-ink bestimmt, ob eine Unterstreichung bei Buchstaben mit Unterlängen wie g, j, p oder y unterbrochen wird.

auto Die Linie spart Buchstabenformen automatisch aus (Standard)
none Die Linie wird durchgehend gezeichnet
all Die Linie spart alle Buchstabenformen aus

typography jumping quickly

text-decoration: underline 3px;
text-decoration-skip-ink: auto;

typography jumping quickly

text-decoration: underline 3px;
text-decoration-skip-ink: none;

Kurz gesagt

text-decoration kombiniert Linie, Stil, Farbe und Dicke
text-underline-offset bestimmt den Abstand der Unterstreichung zum Text
text-decoration-skip-ink steuert Aussparungen an Buchstabenformen
light-dark() kann die Farbe der Linie an das Farbschema anpassen
clamp() ermöglicht eine flexible Dicke der Linie