underline hover navigation link expand center navigation link hover effect tab indicator animation text link highlight static underlines feel flat need animated link indicator without JS want center-outward expansion effect
Nav Underline Expand
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/nav-underline-expand.json Background
Customize
Quick Start
<a href="#" class="nav-underline-expand">About</a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 700 bytes · 33 lines
- Custom Properties
-
--underline-color--underline-height--underline-speed - Classes
-
.nav-underline-expand
underline hover navigation link expand center
A CSS-only underline that grows from the center outward on hover using ::after width transition. Supports aria-current="page" for active state.
Navigation links
<nav class="flex gap-6">
<a href="#" class="nav-underline-expand py-2">Home</a>
<a href="#" class="nav-underline-expand py-2" aria-current="page">About</a>
<a href="#" class="nav-underline-expand py-2">Contact</a>
</nav>Custom styling
<a href="#" class="nav-underline-expand" style="--underline-color: oklch(0.65 0.25 250); --underline-height: 3px">
Thick blue underline
</a>