text link hover nav typography Tailwind nav links with more refined hover motion editorial link lists and inline text actions category or menu labels that need motion without underline tricks basic color-change hovers feel too plain border-draw is too structural for text-first navigation need a pseudo-element based link effect that stays lightweight
Link Swap
Fetch snippet JSON:
curl https://webspire.de/snippets/text/link-swap.json Quick Start
<a class="link-swap text-lg font-semibold" data-hover="Patterns" href="#">Patterns</a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1060 bytes · 52 lines
- Custom Properties
-
--link-swap-from--link-swap-to--link-swap-duration - Classes
-
.link-swap
text link hover nav typography
This is a Tailwind-friendly link effect for navs, editorial lists, and section links. It keeps the markup tiny while making the hover state feel more intentional than a simple color transition.
Navigation links
<nav class="flex gap-6 text-lg font-semibold text-slate-900">
<a class="link-swap" data-hover="Snippets" href="#">Snippets</a>
<a class="link-swap" data-hover="Patterns" href="#">Patterns</a>
<a class="link-swap" data-hover="Templates" href="#">Templates</a>
</nav>Custom hover color
<a
class="link-swap text-lg font-semibold"
data-hover="Registry"
href="#"
style="--link-swap-to: oklch(0.78 0.19 160)"
>
Registry
</a>