Animated link underlines

Animated link underlines are fairly easy to do, and make any website more alive. Well, they are not really underlines, rather a separate div that grows on hover. But how to achieve this?

Underline is no good, and border-bottom will not do here either, as its width is actually the stroke width of said border.

::after to the rescue!

The ::after CSS notation ”creates a pseudo-element that is the last child of the selected element”^[1]. ::before behaves in a very similar way, but it is the first child instead of the last, and ::after is more suitable in our case. We donʼt have to include this in the HTML, Itʼs done by pure CSS!

Letʼs create a simple link, I will add a class to it, but the <a> element itself could be styled as well.

<a class="animated-link" href="https://example.com">
  Example link
</a>

First, letʼs add relative positioning to the a, so that the ::after pseudo-element knows what to compare its size to (otherwise it would be relative to the next relatively or absolutely positioned parent, which could be body itself!) Letʼs also remove any text-decoration, so that the hover effect can be enjoyed in its full glory.

.animated-link {
  position: relative;
  text-decoration: none;
}

Now on to the ::after element itself. It has to have some content so that it is displayed, absolute positioning relative to the parent (our <a> element in this case), a positive height, which will be the stroke width, a background colour, and 0 width in its non-hovered state. Letʼs add a width transition as well, to make a smooth shrink effect when the mouse leaves the link.

.animated-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: hotpink;
  z-index: -1;
  transition: width .3s ease;
}

On hover, we just have to set the width to 100% (meaning 100% of the <a> element) with a nice transition.

.animated-link:hover::after {
  width: 100%;
  transition: width .5s ease;
}

The result: Example link

Thatʼs it, the animated link! The possibilities are endless, it can have a nice highlight effect, or can be a gradient, change stroke width or colour etc. — just keep it low-key and donʼt do these all at once :) Have fun!