Tailwind UI Pattern Registry for humans and agents

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
Format
Preview
Stage 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.

<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>