Tailwind UI Pattern Registry for humans and agents

underline hover shrink link gradient inline text author name link in articles footer link decoration content body link styling need inverse of underline-draw effect want underline that disappears on hover standard text-decoration can't animate smoothly

Underline Shrink

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/underline-shrink.json
Format
Preview
Stage Background
Customize

Quick Start

<a href="#" class="underline-shrink">Author Name</a>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
588 bytes · 23 lines
Custom Properties
--underline-color--underline-speed
Classes
.underline-shrink
underline hover shrink link gradient inline text

The inverse companion to underline-draw. The underline starts fully visible and shrinks to zero width on hover. Works on inline wrapping text via the gradient background technique.

<span class="text-sm text-slate-500">
  By <a href="#" class="underline-shrink text-slate-900">Sarah Chen</a>
</span>
<footer class="text-sm text-slate-400">
  <a href="#" class="underline-shrink">Privacy</a> ·
  <a href="#" class="underline-shrink">Terms</a>
</footer>