Underline slide-in on hover

An underline draws across the link from left to right when hovered. Way more polished than the browser default underline.

Live demo

CSS

.link {
  position: relative;
  padding: 6px 2px;
  color: var(--text);
  text-decoration: none;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.link:hover::after { transform: scaleX(1); }

Variants worth knowing

Slide from right: change transform-origin to right center.

Slide-out on un-hover: change origin to right on the un-hover state — the underline retreats to the right instead of disappearing. Use a wrapper or :not(:hover)::after trick.

Thicker: bump height: 2px to height: 3px with the bottom offset adjusted. Reads more "marker pen."

Source: Jono Catliff masterclass, 2026-05-19. See masterclass notes.