This animated underline heading effect works by combining several Tailwind utilities:

group and group-hover:* to trigger the animation.
origin-left | origin-center | origin-right to define the starting point of the scale animation.
bottom-* to control spacing between the text and the animated underline.
h-* to adjust the underline thickness.

The base demo is shown first, followed by multiple variants for each parameter.

Hover Me

<h1 className="inline-block cursor-pointer group mb-2">
  <span className="relative inline-block z-10 font-bold text-xl">
    Hover Me
    <span className="absolute left-0 bottom-0 h-0.5 w-full origin-left scale-x-0 bg-black transition-transform duration-300 group-hover:scale-x-100"></span>
  </span>
</h1>

Variants:

The origin-* classes control where the underline animation starts scaling from.

Origin Left

<span className="absolute left-0 bottom-1 h-0.5 w-full origin-left scale-x-0 bg-blue-500 transition-transform duration-300 group-hover:scale-x-100"></span>

Origin Center

<span className="absolute left-0 bottom-1 h-0.5 w-full origin-center scale-x-0 bg-green-500 transition-transform duration-300 group-hover:scale-x-100"></span>

Origin Right

<span className="absolute left-0 bottom-1 h-0.5 w-full origin-right scale-x-0 bg-red-500 transition-transform duration-300 group-hover:scale-x-100"></span>

Spacing Variant: `bottom-*`

The bottom-x value adjusts the vertical distance between the text and the animated underline. Larger values push the underline lower.

Bottom 0

Bottom 2

Bottom 4

// bottom-0
<span className="absolute left-0 bottom-0 h-0.5 ..."></span>

// bottom-2

<span className="absolute left-0 bottom-2 h-0.5 ..."></span>

// bottom-4

<span className="absolute left-0 bottom-4 h-0.5 ..."></span>

Thickness Variant: `h-*`

Height 0.5

Height 1

Height 2

// h-0.5
<span className="absolute left-0 bottom-1 h-0.5 ..."></span>

// h-1

<span className="absolute left-0 bottom-1 h-1 ..."></span>

// h-2

<span className="absolute left-0 bottom-1 h-2 ..."></span>

By combining origin-*, bottom-*, and h-*, you can fully customize the underline animation for different heading styles.
All variants above can be mixed and matched to create expressive, dynamic hover effects.

Animated Underline Heading

Base Demo