CSS: Text unterstreichen – So gehts!

Wenn du einen Text in CSS unterstreichen möchtest, dann verwendest du das Element text-decoration. Den einfachsten Weg einen Text zu unterstreichen zeige ich dir in einem kurzen Beispiel

So kannst du in CSS Text unterstreichen:

Einfache Unterstreichung:

Dies ist die Standardmethode und verwendet die Eigenschaft text-decoration: underline;.

p {
  text-decoration: underline;
}

Farbe des Unterstrichs ändern:

Mit der Eigenschaft text-decoration-color kannst du die Farbe des Unterstrichs festlegen.

p {
  text-decoration: underline;
  text-decoration-color: red;
}

Art des Unterstrichs ändern:

Es gibt verschiedene Stile für den Unterstrich, die du mit der Eigenschaft text-decoration-style festlegen kannst.

• none: Kein Unterstrich (Standard)
• underline: Einfacher Unterstrich
• overline: Linie über dem Text
• line-through: Linie durch den Text
• double: Doppelter Unterstrich
• dotted: Gepunktete Linie
• dashed: Gestrichelte Linie
• wavy: Wellenförmige Linie

p {
  text-decoration: underline;
  text-decoration-style: dashed;
}

Dicke des Unterstrichs ändern:

Mit der Eigenschaft text-decoration-thickness kannst du die Dicke des Unterstrichs festlegen.

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

Position des Unterstrichs ändern:

Standardmäßig wird der Unterstrich unter den Textkörper platziert. Mit der Eigenschaft text-decoration-position kannst du die Position ändern.

• above: Linie über dem Text
• below: Linie unter dem Text (Standard)
• line-through: Linie durch den Text

p {
  text-decoration: underline;
  text-decoration-position: above;
}

Unterbrechung des Unterstrichs bei Unterlängen:

Bei einigen Schriftarten werden Unterlängen (z.B. „g“, „j“, „p“, „q“) nicht vollständig vom Unterstrich abgedeckt. Mit der Eigenschaft text-decoration-skip-ink kannst du dies verhindern.

• none: Standardverhalten (Unterstrich unterbricht Unterlängen)
• auto: Automatische Anpassung (Browserabhängig)
• inline: Unterstrich unterbricht keine Zeichen
• none: Unterstrich unterbricht alle Zeichen

p {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

Kombination der Optionen:

Du kannst verschiedene Optionen miteinander kombinieren, um den gewünschten Effekt zu erzielen.

p {
  text-decoration: underline;
  text-decoration-color: blue;
  text-decoration-style: dashed;
  text-decoration-thickness: 3px;
  text-decoration-position: above;
  text-decoration-skip-ink: auto;
}

Zusammenfassung:

Mit den CSS-Eigenschaften text-decoration, text-decoration-color, text-decoration-style, text-decoration-thickness, text-decoration-position und text-decoration-skip-ink hast du vielfältige Möglichkeiten, Texte in deinen Webseiten zu unterstreichen und individuell zu gestalten.