Konkret geht es um fünf CSS-Properties: text-underline-offset, text-underline-position, text-decoration-thickness, text-decoration-skip-ink und text-decoration-color. Die ersten beiden steuern, wo die Linie sitzt, die übrigen, wie sie aussieht – Strichstärke, Aussparung der Unterlängen und Farbe. Zusammen sind sie oft die einfachere Lösung, verglichen mit dem Griff zu border-bottom.

Warum nicht einfach border-bottom verwenden?

Weil ein border-bottom unter dem ganzen Element sitzt, die text-decoration dagegen nur unter dem Text.

Diese Woche bin ich bei einem Navigationsmenü wieder einmal darüber gestolpert. Die Navigationslinks haben ein Padding, einen inneren Abstand, damit die Klickfläche gross genug ist und ein wenig mehr Weissraum um den Navigationslink vorhanden ist. Ein border-bottom würde genau unter dieser Fläche liegen – also mit Abstand nach oben, unten und, viel wichtiger, links und rechts über das Wort hinaus. Was ich brauchte, war aber eine Linie am Wort selbst, mit nur ein wenig Abstand nach unten dazu, ohne am unteren Rand der gesamten Fläche des Navigationslinks zu sitzen.

HTML-Beispiel:

Genau das macht die text-decoration. Die Unterstreichung hängt an den Buchstaben, nicht am Kasten bzw. Element drumherum. Mit text-underline-offset kann man sie ein Stück nach unten schieben, mit text-decoration-thickness kann man sogar die Strichstärke bestimmen.

.main-nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 2px;
}

Damit braucht man kein zusätzliches Element, kein Rechnen mit Paddings und keine umständlichen anderen Wege, um eine einfache Darstellung zu erzielen. Und wenn die Linie eine andere Farbe haben soll als der Text – der klassische Grund, doch wieder zu border-bottom zu greifen –, gibt es dafür text-decoration-color.

Luft unter den Text, ohne die Unterlängen zu treffen

Für den Abstand sorgt text-underline-offset mit einem gesetzten Wert – hier lohnt sich das Ausprobieren, je nach Font (Schrift) können die Werte anders sein. Und dass die Linie die Unterlängen des Texts nicht durchschneidet, erledigt der Browser von selbst – man kann es aber auch steuern. Für tiefgestellte Zeichen und Formeln gilt noch einmal etwas anderes, mehr dazu unter Formeln und tiefgestellte Zeichen.

Mein Weg war zunächst dieser:

p {
  text-underline-position: auto;
  text-underline-offset: 0.15rem;
}

Das sieht gut aus – aber beim Nachrecherchieren habe ich gemerkt, dass ich den Effekt falsch zugeordnet hatte. text-underline-position: auto ist der Standardwert und tut hier wenig. Dass die Unterlängen ausgespart bleiben, macht text-decoration-skip-ink – und zwar im Standardwert auto ganz von allein. Mein text-underline-offset hat also nur die Luft gebracht, den Rest hatte der Browser standardgemäss erledigt.

HTML-Beispiel:

Wenn man den Effekt steuern will, setzt man es explizit:

/* Standard: Linie wird z.B. bei g, p, y unterbrochen */
text-decoration-skip-ink: auto;

/* Linie läuft durch alle Unterlängen */
text-decoration-skip-ink: none;

/* Erzwingt die Unterbrechung – z.B. nötig bei chinesischen, japanischen oder koreanischen (CJK) Fonts */
text-decoration-skip-ink: all;

Übrigens: Dass eine Standardlösung schon das Richtige macht, ist mir nicht zum ersten Mal zu spät aufgefallen – beim Verlinken der Beitragsvorschau bin ich auch über etwas gestolpert, was man selten so als Lösung sieht, obwohl es der bessere Weg ist.

Formeln und tiefgestellte Zeichen

Wenn die Linie komplett unter die Unterlängen rutschen soll, statt sie auszusparen, gibt es text-underline-position: under. Die Linie sitzt dann unter der ganzen Zeile – unter Unterlängen wie g, p oder y. Siehe dazu das HTML-Beispiel im Abschnitt Luft unter den Text, ohne die Unterlängen zu treffen. Gedacht ist der Wert eigentlich für Formeln und tiefgestellte Zeichen, die eine normal sitzende Linie sonst mitten durchschneidet.

HTML-Beispiel:

Wie die Linie am Ende relativ zu tiefgestellten Zeichen sitzt, hängt allerdings von der Schrift ab – die Schrift-Metriken spielen dabei eine Rolle. Dazu kommt der Browser: Safari (auch auf dem iPhone) zieht die Linie bei under nicht durchgehend, sondern zerlegt sie in Segmente – die tiefgestellten Zahlen bekommen eine eigene, tiefer sitzende Unterstreichung. Einen allgemeingültigen Regelfall gibt es nicht; im Zweifel muss man selbst testen, wie sich die eigene Schrift verhält – und wie der Browser sie darstellt. Solche Grenzfälle sind in der CSS-Typografie keine Seltenheit – auch beim schliessenden Anführungszeichen, das allein in der Zeile steht, bleibt am Ende ein Rest offen.

Die fünf Stellschrauben auf einen Blick

  • text-underline-offset – Abstand der Linie zum Text. Nimmt <length> oder <percentage>, Standardwert auto.
  • text-underline-position – wo die Linie grundsätzlich sitzt. auto (Standard) oder under, um die Unterlängen ganz zu umgehen.
  • text-decoration-thickness – Strichstärke. auto, from-font oder ein fester Wert wie 2px.
  • text-decoration-skip-ink – ob die Unterlängen ausgespart werden. auto (Standard) spart aus, none zieht durch, all spart immer aus.
  • text-decoration-color – Farbe der Linie, unabhängig von der Textfarbe. Standardwert currentColor, sprich die Farbe des Texts.

Ein Detail noch: text-underline-offset gehört nicht zum text-decoration-Shorthand. Es muss also separat stehen und lässt sich nicht in einem text-decoration: underline 2px mitschreiben. Strichstärke und Farbe dagegen schon – text-decoration: underline 2px #f00 funktioniert.

Fazit

Nichts davon ist neu oder spektakulär. Aber text-decoration mit seinen Einstellungsmöglichkeiten ist eines dieser kleinen CSS-Details, das existiert, hilfreich ist und das man jahrelang übersieht – bis man einmal ein wenig recherchiert und es sich sparen will, die komplizierten Styles zu schreiben, die ein border-bottom verursachen würde.