Underline Links

About Underline Links

Underline Links is a text-link component with animated underlines. Choose slide, center, fill, wave, marker or arrow, then hover or focus to draw the line. Slide grows left and exits right. Center opens from the middle. Fill lifts a highlight and turns the text dark. Wave draws only on hover, matching the label width with no end dots. Marker uses its own highlighter color and rises through the word. Arrow adds a spring icon; External opens a new tab with ↗. Set text color, line color, thickness and a faint resting line. Accessible, reduced-motion and static-canvas safe. Drop in and publish.

Use Cases

Site navigation and header menus

Footer link columns and sitemap lists

Blog and editorial inline references

Portfolio project titles and case studies

SaaS feature and pricing page

CTAs Agency and studio service lists

Fashion lookbook and product names

Documentation sidebar and next-article links

Event speaker and schedule pages

Landing-page text buttons and captions

Keywords

animated underline, hover underline framer, link underline animation, slide underline, center underline, fill link hover, wave underline, marker highlight link, arrow external link, framer link component, text link hover, nav link animation, editorial underline, accessible link hover