Unterstreichung näher am Text positionieren [CSS]

Wenn ihr einen Link oder anderen Text mit einer Unterstreichung versehen möchtet, dann greift ihr vermutlich auf border-bottom zurück, statt text-decoration: underline zu nutzen. Wenn diese Unterstreichung aber zu weit vom Text entfernt angezeigt wird, habt ihr ein Problem (jedenfalls hatte ich das vor Kurzem), denn weiter nach oben lässt sich so ein Rahmen nicht positionieren. Wie ihr das lösen könnt, zeige ich euch in diesem Artikel.

Update vom 23. September 2016: Statt einen rem-Wert für die Positionierung zu nutzen, bietet sich eher Prozent als Einheit an, damit die Unterstreichung auch halbwegs richtig positioniert ist, wenn der Font nicht geladen wird (oder eine Überschrift mit größerer Schriftgröße verlinkt wird).

Update vom 29. September 2016: Als Fallback für den Internet Explorer 9 kann ein quadratisches Bild mit Höhe und Breite von einem Pixel eingebunden werden – wie das konkret aussieht, seht ihr unten im Code-Block.

Das Problem: Die „Markierungshöhe“ von Fonts

Zunächst hier ein Screenshot, der das Problem zeigt – die Unterstreichung ist über border-bottom umgesetzt:

Ein Bild mit etwas Text, bei dem einige Wörter über border-bottom mit einem Rahmen versehen wurden. Der Rahmen soll eigentlich näher an den Text.Ein Bild mit etwas Text, bei dem einige Wörter über border-bottom mit einem Rahmen versehen wurden. Der Rahmen soll eigentlich näher an den Text.

Wie ihr sehen könnt, wird der Rahmen am unteren Rand der Fläche dargestellt, die beim Markieren von Text erscheint. Die ist von Font zu Font unterschiedlich, und in einem bei mir aktuellen Fall nach unten zu groß. Es sieht nicht so aus, als wäre eine Zeile unterstrichen, sondern als wäre die Linie ein Trenner genau zwischen zwei Zeilen. Die Höhe dieser Markierung kann aber – jedenfalls soweit ich weiß – nicht beeinflusst werden. Und einen Rahmen weiter innen positionieren geht auch nicht. Da ein Link auch mal über zwei Zeilen gehen kann, ist es auch keine gute Idee, die Unterstreichung über ein Pseudo-Element einzufügen.

Die Lösung: background

Als Wert für die CSS-Eigenschaft background-image kann ein Verlauf angegeben werden (lineare Verläufe werden laut Can I use ab IE10 unterstützt). Wir geben als Start- und Endfarbe dieselbe an und bekommen somit eine einfarbige Fläche. Dieser Fläche können wir über background-size eine Höhe zuweisen – zum Beispiel eine Breite von 100 Prozent und eine Höhe von einem Pixel, womit wir eine Linie bekommen. Mit background-position lässt sich die dann positionieren, und fertig ist die Unterstreichung an der richtigen Position:

background: transparent linear-gradient(90deg, #000, #000) no-repeat 0 93%;
background-size: 100% 1px;

0 ist dabei der Abstand nach links und 1.3rem der nach oben. Um wie im Update angesprochen ein Fallback für den IE9 einzubauen, schreiben wir vor die beiden Zeilen eine background-Definition mit einer PNG-Datei als Hintergrund, die horizontal wiederholt wird – die Grafik ist dabei 1×1 Pixel groß. Der Code sieht dann komplett so aus:

background: transparent url('../images/link-underline.png') repeat no-repeat 0 93%;
background: transparent linear-gradient(90deg, #333, #333) no-repeat 0 93%;
background-size: 100% 1px;

Und das ist das Ergebnis:

Ein Screenshot von Text mit einem unterstrichenen Link. Die Position der Unterstreichung ist angepasst und erfolgt nun durch background-image.

Das könnte auch interessant sein

8 Kommentare zu »Unterstreichung näher am Text positionieren [CSS]«

  1. Bernhard

    Interessanter Ansatz. Aber irgendwie funktioniert er nicht. Ich habe ihn mal auf deiner Seite getestet. Bei Links sieht man gar nichts, bei der Überschrift ist die Linie etwas sehr dick.

    Problematisch ist die Technik wohl auch, wenn die Textzeile umbricht. Dann hätte nur die letzte Zeile eine Unterstreichung.

    Ich verwende daher für Unterstreichungen von Text immer text-decoration: underline, denn dafür ist es ja schließlich auch da 🙂

    Ein border-bottom macht z.B. in einer Navigation als Stilelement Sinn. Da ist dein Tipp vermutlich dann gut anzuwenden.

    1. Florian

      Dass hier auf meiner Seite nichts zu sehen ist, hat vermutlich damit zu tun, dass 1.3rem zu groß ist. Ich habe gerade ein Update geschrieben, dass eine Positionierung über Prozent besser ist.

      „Problematisch ist die Technik wohl auch, wenn die Textzeile umbricht. Dann hätte nur die letzte Zeile eine Unterstreichung.“

      Hm, funktioniert bei mir problemlos auch über mehrere Zeilen … In welchem Browser hast du das getestet?

      „Ich verwende daher für Unterstreichungen von Text immer text-decoration: underline, denn dafür ist es ja schließlich auch da 🙂 “

      Da hast du eigentlich Recht, aber mich stört immer so, dass die Unterstreichung beispielsweise durch das g durchgeht (bei Windows jedenfalls – Mac handhabt das glaube ich besser) 😀

      1. Bernhard

        Ich habe deinen neuen Code einfach mal hier im Beitrag mit einer Überschrift und einen Strong-Tag versucht, aber beide Male ist der gesamte Hintergrund schwarz (in Chrome und Firefox).

        Dass eine Unterstreichung die sogenannte „Unterlänge“ durchkreuzt, das ist so gewollt. Ich hoffe mal, dass lernt man auch noch immer so in der Grundschule 😉

        Kannst du vielleicht mal ein CodePen (oder ähnliches) Online-Beispiel erstellen. Vielleicht finde ich dann raus, wieso der Code bei mit nicht funktioniert. Gerne auch mit mehrzeiligem Text.

          1. Florian

            Ja, so mache ich es jetzt erst mal glaube ich auch. Hab das Beispiel aus dem Beitrag wieder mit dem Verlauf umgesetzt und auch das Pen entsprechend verändert.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.