How to create an underline animation effect on hovering over a link

This is a very simple css effect trick for your pages on desktop. The goal is to underline the link on hovering.

Lets start with html:

<a class="underline-effect" href="#">Sign up</a>

No secrets here, right?

The next step is to create the “underline” with a pseudo-element through ::after. The width property is zero, because we don’t want to see the underline yet, it will only be displayed by hovering over the link. We also apply the transition to width.

.underline-effect:after {
  width: 0;
  transition: width 0.2s;
  ...
}

And finally we change the width of the underline to fill the entire space using a combination of pseudo-class with pseudo-element:

.underline-effect:hover:after {
  width: 100%;
}

Live demo: https://jsfiddle.net/scotto/48hoxg1r/

Thanks for reading! My idea is to write short articles that are useful to someone and be compatible with micro learning. I will write more soon!