Snippets /

Animated underline link

Underline slides in on hover using background-size — no pseudo-elements.

Hover me — left to right Hover me — right to left Hover me — thick variant
Widely supported
animationui

Quick implementation

.animated-underline {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-bottom: 2px;
  transition: background-size 0.3s ease-out;
}

.animated-underline:hover,
.animated-underline:focus-visible {
  background-size: 100% 2px;
}

/* Variant: slide from right */
.animated-underline--right {
  background-position: right bottom;
}

Prompt this to your LLM

Includes role, constraints, and direction variants.

You are a senior frontend engineer building navigation components.

Goal: Animated underline on links that slides in on hover and slides out on leave.

Technical constraints:
- Use background-image: linear-gradient(currentColor, currentColor) as the underline.
- Animate background-size from 0% 2px to 100% 2px on hover.
- background-position controls direction: left bottom = slide right, right bottom = slide left.
- Use ease-out timing, 0.25–0.35s duration.
- No pseudo-elements — background-image is simpler and handles multi-line text.
- Use currentColor so the underline matches the text color automatically.
- Include :focus-visible for keyboard navigation.

Variations:
A) Slide left to right.
B) Slide right to left.
C) Center out (background-position: center bottom).
D) Thick underline (3–4px).

Return CSS only.

Why this matters

Animated underlines are one of the most common micro-interactions on the web — navigation bars, article links, footers. The background-image technique replaced the old ::after pseudo-element approach because it handles multi-line text, needs less CSS, and uses currentColor to automatically match the text.

The logic

A linear-gradient with the same start and end color creates a solid rectangle. Setting background-size: 0% 2px makes it invisible. On hover, transitioning to 100% 2px slides it in. background-position controls which edge it grows from — left bottom slides right, right bottom slides left.

Accessibility & performance

background-size is a paint-only property — no layout thrashing. Include :focus-visible so keyboard users see the underline too. Use currentColor instead of a hardcoded color so the underline inherits the link's color, including in high-contrast modes.