text link underline hover nav Tailwind nav links that need a cleaner underline treatment article links or section actions inside editorial layouts secondary CTAs where border-draw would feel too heavy color-only hover is too weak for important text links border-draw is too structural for inline navigation need a small text-first effect that pastes into Tailwind markup easily
Underline Swipe
Fetch snippet JSON:
curl https://webspire.de/snippets/text/underline-swipe.json A lighter inline-link effect when border-draw would feel too heavy.
Background
Customize
Quick Start
<a class="underline-swipe text-lg font-semibold text-slate-900" href="#">Read the article</a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 740 bytes · 32 lines
- Custom Properties
-
--underline-swipe-color--underline-swipe-thickness--underline-swipe-duration - Classes
-
.underline-swipe
text link underline hover nav
A practical text-link effect for Tailwind projects. It keeps the motion close to the typography itself, so it works better for navs and inline actions than larger border-based hover treatments.
Editorial links
<a class="underline-swipe text-lg font-semibold text-slate-900" href="#">
Read the article
</a>