Underline Text

UnderlineText gives you precise control over text underlines without hacks or complex styling. You can underline the entire text or selectively underline specific words or phrases—each with its own color, style, and thickness.

Built using native CSS underline styles for maximum browser compatibility, this component supports solid, dashed, dotted, double, and wavy underlines. Everything is configurable directly from Framer’s property panel, making it perfect for headings, highlights, and expressive typography.

Whether you’re emphasizing keywords in a hero headline or adding subtle accents to UI text, UnderlineText stays lightweight, responsive, and easy to customize.

Key Features

• Underline entire text or only selected words

• Highlight multiple phrases independently

• Supports solid, dashed, dotted, double, and wavy styles

• Custom underline color and thickness per phrase

• Global text underline option

• Full font controls (family, size, weight, spacing)

• Clean, semantic markup (no background hacks)

• Cross-browser compatible CSS underlines

• Lightweight and performance-friendly

Where to Use

• Hero headlines

• Marketing copy

• Feature highlights

• Callouts and emphasis text

• Blog titles and article headers

• Landing pages

• Design-forward typography sections

Best For

• Designers who want fine typographic control

• Framer creators building polished UI

• Marketing and brand websites

• Highlighting keywords without extra components

• Clean, modern design systems