CSS: Link mit ausfahrendem Unterstrich

Eine einfache CSS-Animation macht deine Links zum eleganten Eyecatcher.

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 Blockelement dargestellt wird. Andernfalls würde der Unterstrich größer werden als der eigentliche Link.

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

Sofern wir den Link als HTML-Element und dessen CSS-Eigenschaften erstellt haben kommen wir zum eigentlichen Kernstück dieser CSS-Animation, dem Pseudoelement.

Das Pseudoelement stellt den Unterstrich des Links dar. Damit er sich unterhalb des Texts befindet, kommt das ::after Element zum Einsatz.

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

Die wichtigsten CSS-Eigenschaften des Pseudoelements sind die Höhe, Breite und die Margin. Zwar wird das Pseudoelement am Ende wie ein Unterstrich aussehen (wie bei text-decoration: underline). Im Grunde handelt es sich aber einfach um eine Fläche mit sehr geringer Höhe.
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.

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“.

Ohne den Hover-Efekt ist unser bisheriger Code unbrauchbar. Beim hovern über den Link, nimmt das Pseudoelement 100% der Breite seines Elternelements ein.

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;
  -webkit-transform                  : scaleY(0.9);
  -ms-transform                      : scaleY(0.9);
  transform                          : scaleY(0.9);
}

Zusammenfassung

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

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

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

Quellen / Verweise

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

Kommentar verfassen

Ich habe die Datenschutzerklärung zur Kenntnis genommen. Die abgesendeten Daten werden nur zum Zweck der Bearbeitung Deines Anliegens verarbeitet. Weitere Informationen findest Du in unserer Datenschutzerklärung.