underline hover dual animation choreography navigation link navigation link hover effect button text decoration creative link interaction single underline animations feel basic need more sophisticated link hover choreography want two-phase draw-in/fade-out underline
Underline Dual
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/underline-dual.json Preview
Background
Customize
Quick Start
<a href="#" class="underline-dual">Services</a> Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1053 bytes · 65 lines
- Custom Properties
-
--underline-color--underline-speed - Classes
-
.underline-dual
underline hover dual animation choreography navigation link
A two-element underline choreography: ::before draws in from the left while ::after simultaneously fades out to the right, creating a smooth handoff effect. Gated behind @media (pointer: fine) for touch accessibility.
Navigation links
<nav class="flex gap-6">
<a href="#" class="underline-dual py-1">Home</a>
<a href="#" class="underline-dual py-1">About</a>
<a href="#" class="underline-dual py-1">Contact</a>
</nav>
Custom color
<a href="#" class="underline-dual" style="--underline-color: oklch(0.6 0.2 250)">Learn more</a>