Mario / Blog 愛

Animating Link Underlines

Ever wondered how can you make a more vivid hover state to an anchor tag or a link? Creating this hover state is easy. Let me elaborate,  I will try to explain as simple as possible.

First change the color and remove the underline all anchor tags use by default:

a {
  text-decoration: none;
  color: inherit;
}

For the underline, we'll create it by making use of a pseudoelement and changing its behaviour to display: block.

We want the underline to increment from left to right, so in a way it needs to grow its width from 0 to 100. Set the initial width to 0px and a height of 2px

Almost there, add a background-color and the property transition: width .3s ease for the underline to grow smoothly in a range of 3 miliseconds.

a:after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width .3s;
}

Finally declare when the anchor is hovered over the pseudoelement's width grows 100%.

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

And Voila! Here's the pen: