Textdecoration

Mit der CSS-Eigenschaft text-decoration kannst du Text unterstreichen, überstreichen, durchstreichen oder die Dekoration entfernen. Sie wird häufig bei Links, Überschriften oder hervorgehobenen Texten verwendet.

Grundsyntax

1selector {
2    text-decoration: wert;
3}

Text unterstreichen

Unterstreicht den Text.

1p {
2    text-decoration: underline;
3}

Linien über Text

Fügt eine Linie über dem Text ein.

1h1 {
2    text-decoration: overline;
3}

Durchgestrichner Text

Stricht Text durch

1p {
2    text-decoration: line-through;
3}

Textdecoration entfernen

Entfernt vorhandene Dekorationen. Dieser Wert wird besonders häufig bei Links verwendet. Um unterstriche zu entfernen.

1<a href="#">Ich bin ein Link</a>

1a {
2    text-decoration: none;
3}

text-decoration-color - Farben hinzufügen

Bestimmt die Farbe der Linie.

1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}

text-decoration-style

1p {
2    text-decoration: underline;
3    text-decoration-style: dashed;
4}

Weitere Werte:

• solid (Standard) - durchghende Linie
• double - doppelt unterstrichen
• dotted - gepunktet unterstrichen
• dashed - gestrichelt unterstrichen
• wavy - wellenförmig unterstrichen

text-decoration-thickness

Legt die Dicke der Linie fest

1p {
2    text-decoration: underline;
3    text-decoration-thickness: 3px;
4}

Alles in einer Zeile

Hier unterstreichst du in einer Zeile gestrichelt (underline dashed), änderst die Farbe (red) und legst die Dicke der gestrichelten Linie fest (3px)

1p {
2    text-decoration: underline dashed red 3px;
3}