Animated Hover Underline

Preview

Tailwind Classes

relative after:absolute after:bottom-0 after:left-1/2 after:w-0 after:h-0.5 after:bg-current after:transition-all hover:after:w-full hover:after:-translate-x-1/2

CSS Code

.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: all 0.3s;
}
.hover-underline:hover::after {
  width: 100%;
  transform: translateX(-50%);
}

HTML Example

<a href="#" class="relative text-blue-600 after:absolute after:bottom-0 after:left-1/2 after:w-0 after:h-0.5 after:bg-current after:transition-all hover:after:w-full hover:after:-translate-x-1/2">
  Hover for underline
</a>

Use Cases

Browser Support

All modern browsers