CSS: Link beim Mouseover animiert unterstreichen

Wem das normale Underline zu langweilig ist für seine Links, der kann das Ganze auch etwas verspielter machen. Z.b das Unterstreichen von links nach rechts zu animieren.

Wichtig ist, dass das a-Element ein Text-decoration: none bekommt um eine automatische Unterstreichung zu vermeiden. Dann sollte man dem Element ein Position: relative verpassen, da wir unsere Linie absolut unter dem Element platzieren.

 

DEMO: Hover Me

 

a {
  color: #333333;
  text-decoration: none;
  position: relative;
}

Jetzt erstellen wir mit einem a:after unsere Linie die zum derzeitigen Punkt noch eine Breite von 0% hat. Sie wird beim Hover auf 100 Prozent gesetzt und durch eine Transition wird das animiert.

 

a:after {
  content: ''; /* content ist leer... */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #333333;
  transition: 0.6s;
}

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

 


Danke!   3

Ich bin David, 27, stolzer Papa, Ostmopedliebhaber und Anwendungsentwickler aus Fulda und konserviere nach dem Feierabend meine Problemchen über die ich tagsüber so gestolpert bin.

Schreibe einen Kommentar

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