Layout SVG

CSS: Link mit ausfahrendem Unterstrich

Zuletzt bearbeitet am: 29.9.2021

Mit dieser CSS-Hover-Animation werden Links zum absoluten Eyecatcher.

Image by WojciechKrakowiak (https://pixabay.com/photos/code-computer-css-it-monitor-1797778/)

Image by WojciechKrakowiak (https://pixabay.com/photos/code-computer-css-it-monitor-1797778/)

Mit wenigen Zeilen Code einen einfachen und optisch ansprechenden Hovereffekt für Links erstellen. So geht’s:

Zunächst benötigen wir einen Textlink.

<a href="#">Hover me</a>

Im nächsten Schritt erstellen wir das CSS. Bei den CSS-Eigenschaften zum Link ist es wichtig, dass der Link als Inline-Blockelement dargestellt wird. Andernfalls würde der Unterstrich größer werden als sein Parent.

a {
  display: inline-block;
  color: #000;
  text-decoration: none;
}

Nun kommen wir zum eigentlichen Kernstück dieser CSS-Animation, dem Pseudoelement.
Das Pseudoelement stellt den Unterstrich dar. Um ihn unterhalb des Textes zu positionieren, bietet sich das ::after Pseudoelement an.

a::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 0%;
  height: 2px;
  background: #000;
  transition-duration: .5s;
  transition-property: all;
  transition-timing-function: ease;
}

Im „Urzustand“ soll der Unterstrich natürlich nicht sichtbar sein. Von daher definieren wir eine Breite von 0%.
Um den Unterstrich mittig auszurichten und ihn vor allem mittig ausfahren zu lassen, ist die Eigenschaft margin: 0 auto; bzw. margin: auto; nötig. Falls du den Unterstrich von der linken oder rechten Seite ausfahren lassen möchtest, kannst du margin-left: auto; bzw. margin-right: auto; verwenden.

Da der Unterstrich, anders als bei z.B. text-decoration: underline, im Prinzip eine Fläche mit sehr geringer Höhe ist, haben wir bei diesem Beispiel einen großen Gestaltungsspielraum. Die Höhe kann natürlich beliebig angepasst aber auch andere Stylings können angewandt werden wie zum Beispiel abgerundete Ecken oder ein Farbverlauf.

Für das geschmeidige Ausfahren des Unterstrichs benötigen wir die Transition Eigenschaften. Andernfalls würde der Unterstrich nur nach dem Lichtschalterprinzip aus- und wieder angehen und nicht „ausfahren“.

Zu guter Letzt definieren wir den Hover-Effekt. Ganz einfach: beim hovern über den Textlink soll das Pseudoelement eine Breite von 100% annehmen (also die Breite des Parents).

a:hover::after {
  width: 100%;
}

Ergebnis

Hover me

Zusatz

Mit margin-top kann der Abstand zwischen dem Link und dem Unterstrich gesteuert werden. Außerdem kann es in einigen Browsern zu einem Darstellungsfehler in der Stärke des Unterstrichs kommen. Dabei wird der Strich 1 – 2px zu hoch dargestellt. Durch eine Skalierung des Pseudoelements transform: scaleY(0.9); kann der Fehler vermieden werden.

a::after {
  margin: -5px auto 0 auto;
  transform: scaleY(0.9);
}

Zusammenfassung

<a href="#">Hover me</a>
a {
  display: inline-block;
  color: #000;
  text-decoration: none;
}

a::after {
  content: "";
  display: block;
  margin: 0 auto;
  width: 0%;
  height: 2px;
  background: #000;
  transition-duration: .5s;
  transition-property: all;
  transition-timing-function: ease;
  transform: scaleY(0.9);
}

a:hover::after {
  width: 100%;
}

Quellen/Verweise

https://github.com/ncb29/css-animations/tree/master/Driving%20underline%20hover%20pseudoelement

Hat dir der Beitrag gefallen?

Dann lass gerne einen Like da.

x
Vielen Dank für deine Bewertung
Layout SVG Bottom

2 Kommentare

  • Echt super erklärt und dargestellt! Habe es auf meiner Website angewendet.

    • Freut mich, dass der Artikel dir geholfen hat und du den Code weiter verwenden konntest.

Kommentar verfassen

Deine Email-Adresse wird nicht veröffentlicht.
Erforderliche Felder sind mit * gekennzeichnet

Layout SVG Bottom