text-decoration vs border-bottom: zwei Wege, einen Link zu unterstreichen

Was die Unterstreichung weiß, was der Rahmen nicht weiß

text-decoration: underline zeichnet die Linie dort, wo die Schrift sie vorsieht, und aktuelle Browser unterbrechen sie an Unterlängen (text-decoration-skip-ink: auto). Sie folgt dem Text über Zeilenumbrüche und liegt auch bei mehrzeiligen Links unter jeder Zeile. border-bottom ist eine Rahmenlinie an der Unterkante der Inline-Box: gleichmäßig, durch Unterlängen hindurch, und bei einem Umbruch nur am Ende der letzten Box, wenn box-decoration-break nicht clone ist.

Warum der Rahmen lange gewann

CSS 2.1 erlaubt an text-decoration nichts außer Art und Farbe des Textes. Abstand, Stärke, eigene Farbe – dafür brauchte es border-bottom mit padding-bottom. Die Referenzseiten dieser Website unterstreichen Links bis heute so, aus der Zeit, als es nicht anders ging.

Was die echte Unterstreichung heute kann

a {
  text-decoration: underline;
  text-decoration-color: #7A2FB0;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

Farbe, Stärke und Abstand sind eigene Eigenschaften; text-decoration-style: wavy oder dotted ändert die Form. Alles seit 2020 in allen verbreiteten Browsern.

Die dritte Möglichkeit: ein Verlauf als Linie

Zwischen den beiden gibt es einen dritten Weg, der lange die beste Unterstreichung ergab: ein Hintergrundbild aus einem Farbverlauf, das nur wenige Pixel hoch ist und am unteren Rand des Textes positioniert wird. Es liegt hinter dem Text, also kann ein Schatten in der Hintergrundfarbe die Unterlängen aussparen; es lässt sich in Höhe, Farbe und Abstand frei bestimmen; und es folgt dem Textfluss über Zeilenumbrüche hinweg, was ein Rahmen nicht kann.

Der Aufwand ist der Preis: drei Deklarationen statt einer, und bei jedem Wechsel der Hintergrundfarbe muss die Aussparung nachgezogen werden. Seit die echte Unterstreichung Dicke, Farbe, Abstand und das Aussparen der Unterlängen beherrscht, hat der Verlauf seinen Zweck weitgehend verloren. Er bleibt nützlich für eine Linie, die kein Strich sein soll – ein weicher Balken hinter einer Überschrift, eine Markierung wie mit einem Textmarker –, und dafür ist er nach wie vor die einzige Lösung ohne zusätzliches Element.

Was die Linie über die Bedeutung sagt

Eine Unterstreichung ist im Web seit jeher das Zeichen für einen Verweis, und daran hat sich wenig geändert. Wer sie an gewöhnlichem Text verwendet, erzeugt eine Erwartung, die ins Leere läuft; wer sie an Verweisen entfernt, nimmt allen Lesern, die Farben schlecht unterscheiden, das einzige verbleibende Merkmal. Beides sind keine Fragen der Eigenschaft, sondern der Entscheidung, welche der beiden Techniken man wählt – die Regel gilt für die echte Unterstreichung und für den nachgebauten Rahmen gleichermaßen.

Davon zu trennen ist die Auszeichnung im Dokument selbst. Für eingefügten und gelöschten Text gibt es eigene Elemente, deren Vorgabe-Darstellung die Unterstreichung beziehungsweise den Durchstrich mitbringt; für einen Namen oder einen Fachbegriff, der ohne Verweisbedeutung hervorgehoben werden soll, gibt es das Element für nicht näher bestimmte Auszeichnung. Die Linie kommt dann aus der Bedeutung und nicht aus dem Stylesheet – und lässt sich dort immer noch abschalten oder umgestalten.

Vererbung: die Linie reicht weiter, als man denkt

Die Unterstreichung wird nicht im eigentlichen Sinn vererbt, aber sie wirkt über die Nachfahren hinweg: Wird sie an einem Block gesetzt, unterstreicht sie den gesamten Text darin, einschließlich der Inline-Elemente. Und – das ist der überraschende Teil – sie lässt sich an einem Nachfahren nicht abschalten. Eine Hervorhebung innerhalb eines unterstrichenen Absatzes bleibt unterstrichen, auch wenn dort ausdrücklich text-decoration: none steht.

Ein Rahmen verhält sich anders: Er gehört genau zu der Box, an der er notiert ist, und ein Kind hat damit nichts zu tun. Wer eine Linie unter einem Absatz braucht, die einzelne Wörter aussparen soll, kommt mit der Unterstreichung also nicht weiter und muss sie an die einzelnen Inline-Elemente hängen. Umgekehrt ist genau diese Durchgriffswirkung nützlich, wenn eine ganze Zeile durchgestrichen erscheinen soll: Ein einziger Wert am Container genügt, und alles darin – Text, Verweise, Zahlen – trägt den Strich, ohne dass eine einzige Regel für die Kinder nötig wäre.

Wann welches

• Links im Fließtext, mehrzeilig, mit Unterlängen: text-decoration mit Offset und Stärke.
• Eine Linie unter einer ganzen Box – Überschrift, Zelle, Tab: border-bottom.
• Animierte Unterstreichung, die von links wächst: ein Pseudoelement oder ein Hintergrundverlauf, keins von beiden.

Häufige Fragen