underline hover link draw gradient inline text navigation link hover effect article inline link styling footer link decoration text-decoration can't be animated smoothly ::after underlines don't work on multi-line inline text need left-to-right underline draw animation
Underline Draw
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/underline-draw.json Preview
Background
Customize
Quick Start
<a href="#" class="underline-draw">Read more</a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 580 bytes · 23 lines
- Custom Properties
-
--underline-color--underline-speed - Classes
-
.underline-draw
underline hover link draw gradient inline text
A single-pixel gradient underline that starts at width 0 and expands to full width on hover. Unlike ::after pseudo-element approaches, this works correctly on inline wrapping text across multiple lines.
Link hover
<a href="#" class="underline-draw">Learn more about our approach</a>Navigation
<nav class="flex gap-6">
<a href="#" class="underline-draw">Home</a>
<a href="#" class="underline-draw">About</a>
<a href="#" class="underline-draw">Contact</a>
</nav>Custom color
<a href="#" class="underline-draw" style="--underline-color: oklch(0.6 0.2 250)">Blue underline</a>