So unterstreichst du Text in CSS
text-decoration: underline zeichnet eine Linie unter Text. Die Linie nimmt die Textfarbe, außer du gibst ihr eine eigene.
Die zweite Zeile verwendet die Kurzschreibweise text-decoration für Linientyp, Stil und Farbe und setzt dann Dicke und Abstand mit eigenen Eigenschaften. Die Spezifikation erlaubt die Dicke auch in der Kurzschreibweise, aber Safari verwirft die ganze Deklaration, wenn du sie angibst. Schreib text-decoration-thickness also separat.
Die text-decoration-Eigenschaften
| Eigenschaft | Werte | Standard |
|---|---|---|
text-decoration-line | underline, overline, line-through, none (kombinierbar) | none |
text-decoration-style | solid, double, dotted, dashed, wavy | solid |
text-decoration-color | Jede Farbe | currentColor (die Textfarbe) |
text-decoration-thickness | Eine Länge, ein Prozentwert, auto, from-font | auto |
text-underline-offset | Eine Länge, ein Prozentwert, auto | auto |
text-decoration ist die Kurzschreibweise für die ersten vier, aber lass die Dicke draußen: Safari ignoriert eine text-decoration-Deklaration, die eine enthält. text-underline-offset ist eigenständig und muss für sich allein stehen.
Stile, Farben und Dicke
Die Unterstreichung verschieben: text-underline-offset
Standardmäßig sitzt die Linie dicht unter den Buchstaben und lässt Unterlängen wie g, p und y aus. text-underline-offset schiebt sie weiter nach unten, was bei Überschriften und Links oft sauberer aussieht:
Die Lücken um die Unterlängen kommen von text-decoration-skip-ink: auto, das standardmäßig aktiv ist. Setz es auf none für eine durchgehende Linie.
Die Unterstreichung von Links entfernen
Links werden vom Stylesheet des Browsers unterstrichen. text-decoration: none entfernt das. Weil viele Leser Links an ihrer Unterstreichung finden, hol sie bei Hover und Tastaturfokus zurück und gib dem Link eine Farbe, die sich vom Text abhebt:
Navigationsleisten und Buttons sind ein fairer Ort, um die Unterstreichung wegzulassen, weil ihre Position schon „Link“ sagt. Innerhalb eines Textabsatzes behältst du sie. Mehr zu den Zuständen von Links steht auf der Seite zu hover.
Überstreichen und Durchstreichen
text-decoration-line zeichnet auch eine Linie über oder durch den Text und nimmt mehr als einen Wert an:
.old-price { text-decoration: line-through; }
.both { text-decoration-line: underline overline; }
Durchstreichen per CSS ist rein optisch. Handelt es sich um gelöschten Inhalt (ein geänderter Preis, ein entfernter Eintrag), markiere ihn mit <s> oder <del>, wie die Seite zu HTML unterstreichen zeigt, damit die Bedeutung im Markup steckt und nicht nur im Styling.
Häufige Fehler
<u>zum Unterstreichen aus optischen Gründen verwenden.<u>ist für Text gedacht, der als anders markiert ist, etwa Rechtschreibfehler. Für eine gestaltete Unterstreichung nimmst du CSS.- Text unterstreichen, der kein Link ist. Leser werden versuchen, darauf zu klicken. Betone stattdessen mit Fett, Farbe oder einem Hintergrund.
- Link-Unterstreichungen im Fließtext entfernen, ohne einen anderen Hinweis. Farbe allein reicht nicht für Leser, die den Unterschied nicht sehen.
- Die Unterstreichung eines Elternelements an einem Kind entfernen wollen. Von innen lässt sie sich nicht rückgängig machen; ändere das Elternelement oder mach das Kind zu
inline-block. text-underline-offsetin der Kurzschreibweise erwarten. Es ist eine eigene Eigenschaft.- Die Dicke in die Kurzschreibweise setzen.
text-decoration: underline 2pxfunktioniert in Chrome und Firefox, aber Safari verwirft die ganze Deklaration. Nimmtext-decoration-thickness.
Häufig gestellte Fragen
Wie unterstreiche ich Text in CSS?
Nimm text-decoration: underline; am Element. Für das Aussehen der Linie ergänzt du text-decoration-color, text-decoration-style, text-decoration-thickness und text-underline-offset.
Wie entferne ich die Unterstreichung eines Links?
Setz text-decoration: none; am Element a. Sorg dafür, dass Links auf andere Weise auffallen (Farbe plus Unterstreichung bei Hover oder Fokus), weil viele Leser Links an der Unterstreichung erkennen.
Wie ändere ich die Farbe der Unterstreichung?
Mit text-decoration-color oder der Kurzschreibweise: text-decoration: underline #f59e0b;. Ohne Angabe nimmt die Linie die Textfarbe.
Wie vergrößere ich den Abstand zwischen Text und Unterstreichung?
Mit text-underline-offset, zum Beispiel text-underline-offset: 4px;. Größere Werte schieben die Linie weiter unter den Text.
Warum kann ich die Unterstreichung an einem Kindelement nicht entfernen?
Eine Unterstreichung, die ein Elternelement zeichnet, wird über seine Kinder hinweg gemalt und lässt sich von innen nicht entfernen. Entferne sie an dem Element, das sie setzt, oder mach das Kind zu display: inline-block, das die Dekoration des Elternelements nicht erreicht.
