30 Tailwind CSS Hover Effects
25 / 30

All 30 in 30 Tailwind CSS Hover Effects

  1. 01Tailwind Underline Draw Hover Effect
  2. 02Tailwind Text Glitch Hover Effect
  3. 03Tailwind Letter Spacing Expand Hover Effect
  4. 04Tailwind Gradient Text Reveal Hover Effect
  5. 05Tailwind Split Text Hover Effect
  6. 06Tailwind Neon Glow Text Hover Effect
  7. 07Tailwind Magnetic Liquid Button Hover Effect
  8. 08Tailwind Border Draw Hover Effect
  9. 09Tailwind Shimmer Shine Button Hover Effect
  10. 10Tailwind Fill Wipe Button Hover Effect
  11. 11Tailwind 3D Press Button Hover Effect
  12. 12Tailwind Ripple Button Hover Effect
  13. 13Tailwind 3D Tilt Card Hover Effect
  14. 14Tailwind Card Flip Hover Effect
  15. 15Tailwind Glassmorphism Card Hover Effect
  16. 16Tailwind Spotlight Card Hover Effect
  17. 17Tailwind Slide Reveal Card Hover Effect
  18. 18Tailwind Stack Lift Card Hover Effect
  19. 19Tailwind Zoom Pan Image Hover Effect
  20. 20Tailwind Color Channel Split Hover Effect
  21. 21Tailwind Duotone Image Hover Effect
  22. 22Tailwind Curtain Reveal Image Hover Effect
  23. 23Tailwind Ken Burns Image Hover Effect
  24. 24Tailwind Image Tilt Depth Hover Effect
  25. 25Tailwind Underline Slide Nav Hover Effect
  26. 26Tailwind Highlight Fill Nav Hover Effect
  27. 27Tailwind Strikethrough Hover Link Effect
  28. 28Tailwind Inline Word Swap Hover Effect
  29. 29Tailwind Dot Trail Cursor Hover Effect
  30. 30Tailwind Magnetic Cursor Pull Hover Effect
Pure TailwindMIT licensed

Tailwind Underline Slide Nav Hover Effect

Six navigation underline styles — grow from left, expand from centre, an overline that switches origin mid-interaction, a double line, a thick highlight and a dot indicator. Six navs, one anchor recipe, one changed utility each.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: 5,000+ React + Tailwind CSS v4 components · from $349 one-time

Untitled UI React · Affiliate link

Get Untitled UI Pro

The code

<section class="thv-25 w-full min-h-svh bg-thv25-bg font-thv25-sans px-8 py-12 flex flex-col gap-11">
  <p class="text-center text-[0.72rem] tracking-[0.15em] uppercase text-thv25-dim">Underline Slide Nav — 6 Styles</p>

  <nav aria-label="Grow from left" class="flex flex-wrap items-center gap-8">
    <a href="#" aria-current="page" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc aria-[current=page]:text-white after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 aria-[current=page]:after:scale-x-100 motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Grow from Left</span>
  </nav>

  <nav aria-label="Expand from centre" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Expand from Centre</span>
  </nav>

  <nav aria-label="Top overline" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative pt-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:before:origin-left focus-visible:before:scale-x-100 focus-visible:before:origin-left motion-reduce:before:transition-none">Home</a>
    <a href="#" class="relative pt-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:before:origin-left focus-visible:before:scale-x-100 focus-visible:before:origin-left motion-reduce:before:transition-none">About</a>
    <a href="#" class="relative pt-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:before:origin-left focus-visible:before:scale-x-100 focus-visible:before:origin-left motion-reduce:before:transition-none">Work</a>
    <a href="#" class="relative pt-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:before:origin-left focus-visible:before:scale-x-100 focus-visible:before:origin-left motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Top Overline</span>
  </nav>

  <nav aria-label="Double line" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-350 after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-350 hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-350 after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-350 hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-350 after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-350 hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-350 after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-350 hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Double Line</span>
  </nav>

  <nav aria-label="Thick fill highlight" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative isolate px-1.5 py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:-inset-x-1.5 after:-bottom-0.5 after:-z-10 after:h-[34px] after:rounded after:bg-thv25-acc after:origin-bottom after:scale-y-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-y-100 focus-visible:after:scale-y-100 motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative isolate px-1.5 py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:-inset-x-1.5 after:-bottom-0.5 after:-z-10 after:h-[34px] after:rounded after:bg-thv25-acc after:origin-bottom after:scale-y-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-y-100 focus-visible:after:scale-y-100 motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative isolate px-1.5 py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:-inset-x-1.5 after:-bottom-0.5 after:-z-10 after:h-[34px] after:rounded after:bg-thv25-acc after:origin-bottom after:scale-y-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-y-100 focus-visible:after:scale-y-100 motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative isolate px-1.5 py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:-inset-x-1.5 after:-bottom-0.5 after:-z-10 after:h-[34px] after:rounded after:bg-thv25-acc after:origin-bottom after:scale-y-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-y-100 focus-visible:after:scale-y-100 motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Thick Fill Highlight</span>
  </nav>

  <nav aria-label="Dot indicator" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative pb-2 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-[5px] after:h-[5px] after:rounded-full after:bg-thv25-acc after:-translate-x-1/2 after:scale-0 after:transition-transform after:duration-250 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-100 focus-visible:after:scale-100 motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative pb-2 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-[5px] after:h-[5px] after:rounded-full after:bg-thv25-acc after:-translate-x-1/2 after:scale-0 after:transition-transform after:duration-250 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-100 focus-visible:after:scale-100 motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative pb-2 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-[5px] after:h-[5px] after:rounded-full after:bg-thv25-acc after:-translate-x-1/2 after:scale-0 after:transition-transform after:duration-250 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-100 focus-visible:after:scale-100 motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative pb-2 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-[5px] after:h-[5px] after:rounded-full after:bg-thv25-acc after:-translate-x-1/2 after:scale-0 after:transition-transform after:duration-250 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-100 focus-visible:after:scale-100 motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Dot Indicator</span>
  </nav>
</section>
@import "tailwindcss";

@theme {
  --color-thv25-bg: #0b0b0f;
  --color-thv25-bg: oklch(0.13 0.01 285);
  --color-thv25-ink: #cccccc;
  --color-thv25-ink: oklch(0.83 0 0);
  --color-thv25-dim: #8a8a94;
  --color-thv25-dim: oklch(0.64 0.01 285);
  --color-thv25-acc: #7c6af7;
  --color-thv25-acc: oklch(0.62 0.2 285);
  --font-thv25-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-25 {
  width: 100%;
  min-height: 100svh;
}

.thv-25 ::selection {
  background: var(--color-thv25-acc);
  color: #fff;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

1Load Tailwind
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-thv25-bg: #0b0b0f;
  --color-thv25-bg: oklch(0.13 0.01 285);
  --color-thv25-ink: #cccccc;
  --color-thv25-ink: oklch(0.83 0 0);
  --color-thv25-dim: #8a8a94;
  --color-thv25-dim: oklch(0.64 0.01 285);
  --color-thv25-acc: #7c6af7;
  --color-thv25-acc: oklch(0.62 0.2 285);
  --font-thv25-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-25 {
  width: 100%;
  min-height: 100svh;
}

.thv-25 ::selection {
  background: var(--color-thv25-acc);
  color: #fff;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • Six navs, one anchor recipe: the diff between "grow from left" and "expand from centre" is literally after:origin-left vs after:origin-center.
  • UI change from the CSS original: every nav is a real <nav aria-label>, every link has a focus-visible: twin plus a ring, and the first nav marks its active item with aria-current="page" styled through aria-[current=page]: — the source had no active state at all.
  • The :has() shared-slider variant from the source was dropped in favour of the attribute-driven active state: it needed no new browser floor and expresses the same idea more honestly.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Underline Slide Nav Hover Effect
Source: https://codefronts.com/motion/tailwind-css-hover-effects/tailwind-underline-slide-nav-hover-effect/

Six navigation underline styles — grow from left, expand from centre, an overline that switches origin mid-interaction, a double line, a thick highlight and a dot indicator. Six navs, one anchor recipe, one changed utility each.
## HTML
```html
<section class="thv-25 w-full min-h-svh bg-thv25-bg font-thv25-sans px-8 py-12 flex flex-col gap-11">
  <p class="text-center text-[0.72rem] tracking-[0.15em] uppercase text-thv25-dim">Underline Slide Nav — 6 Styles</p>

  <nav aria-label="Grow from left" class="flex flex-wrap items-center gap-8">
    <a href="#" aria-current="page" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc aria-[current=page]:text-white after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 aria-[current=page]:after:scale-x-100 motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Grow from Left</span>
  </nav>

  <nav aria-label="Expand from centre" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative pb-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-center after:scale-x-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.4,0,.2,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Expand from Centre</span>
  </nav>

  <nav aria-label="Top overline" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative pt-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:before:origin-left focus-visible:before:scale-x-100 focus-visible:before:origin-left motion-reduce:before:transition-none">Home</a>
    <a href="#" class="relative pt-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:before:origin-left focus-visible:before:scale-x-100 focus-visible:before:origin-left motion-reduce:before:transition-none">About</a>
    <a href="#" class="relative pt-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:before:origin-left focus-visible:before:scale-x-100 focus-visible:before:origin-left motion-reduce:before:transition-none">Work</a>
    <a href="#" class="relative pt-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-300 before:ease-[cubic-bezier(.4,0,.2,1)] hover:before:scale-x-100 hover:before:origin-left focus-visible:before:scale-x-100 focus-visible:before:origin-left motion-reduce:before:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Top Overline</span>
  </nav>

  <nav aria-label="Double line" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-350 after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-350 hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-350 after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-350 hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-350 after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-350 hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc before:content-[''] before:absolute before:inset-x-0 before:top-0 before:h-0.5 before:bg-thv25-acc before:origin-right before:scale-x-0 before:transition-transform before:duration-350 after:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-thv25-acc after:origin-left after:scale-x-0 after:transition-transform after:duration-350 hover:before:scale-x-100 hover:after:scale-x-100 focus-visible:before:scale-x-100 focus-visible:after:scale-x-100 motion-reduce:before:transition-none motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Double Line</span>
  </nav>

  <nav aria-label="Thick fill highlight" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative isolate px-1.5 py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:-inset-x-1.5 after:-bottom-0.5 after:-z-10 after:h-[34px] after:rounded after:bg-thv25-acc after:origin-bottom after:scale-y-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-y-100 focus-visible:after:scale-y-100 motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative isolate px-1.5 py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:-inset-x-1.5 after:-bottom-0.5 after:-z-10 after:h-[34px] after:rounded after:bg-thv25-acc after:origin-bottom after:scale-y-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-y-100 focus-visible:after:scale-y-100 motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative isolate px-1.5 py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:-inset-x-1.5 after:-bottom-0.5 after:-z-10 after:h-[34px] after:rounded after:bg-thv25-acc after:origin-bottom after:scale-y-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-y-100 focus-visible:after:scale-y-100 motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative isolate px-1.5 py-1 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:-inset-x-1.5 after:-bottom-0.5 after:-z-10 after:h-[34px] after:rounded after:bg-thv25-acc after:origin-bottom after:scale-y-0 after:transition-transform after:duration-300 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-y-100 focus-visible:after:scale-y-100 motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Thick Fill Highlight</span>
  </nav>

  <nav aria-label="Dot indicator" class="flex flex-wrap items-center gap-8">
    <a href="#" class="relative pb-2 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-[5px] after:h-[5px] after:rounded-full after:bg-thv25-acc after:-translate-x-1/2 after:scale-0 after:transition-transform after:duration-250 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-100 focus-visible:after:scale-100 motion-reduce:after:transition-none">Home</a>
    <a href="#" class="relative pb-2 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-[5px] after:h-[5px] after:rounded-full after:bg-thv25-acc after:-translate-x-1/2 after:scale-0 after:transition-transform after:duration-250 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-100 focus-visible:after:scale-100 motion-reduce:after:transition-none">About</a>
    <a href="#" class="relative pb-2 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-[5px] after:h-[5px] after:rounded-full after:bg-thv25-acc after:-translate-x-1/2 after:scale-0 after:transition-transform after:duration-250 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-100 focus-visible:after:scale-100 motion-reduce:after:transition-none">Work</a>
    <a href="#" class="relative pb-2 text-[0.95rem] font-medium text-thv25-ink no-underline transition-colors duration-250 rounded-xs hover:text-white focus-visible:text-white focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-thv25-acc after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-[5px] after:h-[5px] after:rounded-full after:bg-thv25-acc after:-translate-x-1/2 after:scale-0 after:transition-transform after:duration-250 after:ease-[cubic-bezier(.34,1.56,.64,1)] hover:after:scale-100 focus-visible:after:scale-100 motion-reduce:after:transition-none">Contact</a>
    <span class="ml-auto text-[0.68rem] tracking-[0.1em] uppercase text-thv25-dim">Dot Indicator</span>
  </nav>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-thv25-bg: #0b0b0f;
  --color-thv25-bg: oklch(0.13 0.01 285);
  --color-thv25-ink: #cccccc;
  --color-thv25-ink: oklch(0.83 0 0);
  --color-thv25-dim: #8a8a94;
  --color-thv25-dim: oklch(0.64 0.01 285);
  --color-thv25-acc: #7c6af7;
  --color-thv25-acc: oklch(0.62 0.2 285);
  --font-thv25-sans: 'Space Grotesk', system-ui, sans-serif;
}

.thv-25 {
  width: 100%;
  min-height: 100svh;
}

.thv-25 ::selection {
  background: var(--color-thv25-acc);
  color: #fff;
}
```

How this works

One recipe, six parameters. Every link is relative pb-1 with an after: bar; the variants change the origin, the axis, the position or the size. That is the case for utilities in a nutshell — the variation is visible as a diff.

The overline's trick survives. before:origin-right at rest and hover:before:origin-left means the bar draws in from the left and retracts to the right, which feels directional rather than elastic.

Active state is an attribute. The current page carries aria-current="page" and styles from aria-[current=page]:, so semantics and appearance cannot drift apart.

Make it yours

  • Retint through --color-thv25-acc; every variant reads it.
  • Thicker bars: after:h-0.5 → after:h-[3px].
  • Springier dot: raise the overshoot in cubic-bezier(.34,1.56,.64,1).

Gotchas — read before shipping

  • scale-x composites; animating width does not. Prefer the transform.
  • The thick highlight needs isolate on the link so after:-z-10 stays inside it.
  • Every hover: here has a focus-visible: twin — a nav whose only affordance is hover is unusable by keyboard.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Baseline transforms and pseudo-elements; the floor is Tailwind v4's generated sheet.

Techniques used in this demo

Utilitiesfirst-class utility or variant

transformstw ↗transform origintw ↗transitionstw ↗:focus-visibletw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →