How do I underline text in Webflow?

Set the line in the typography settings

Select the text element, such as a text link, a paragraph, or a heading. Open the Style panel and use the typography decoration settings. Webflow names them Line, Thick, Offset, and position.

Line is the kind of decoration: an underline, an overline, or a line through the text. Thick is the thickness of that line. Offset and position set how far the line sits from the text, and where it sits. Those two appear only when Line is an underline. They have no effect on an overline or a line through, so Webflow hides them until the underline is selected.

Give the link a class before you style the second one. The decoration is stored on the class, so the next link that uses the class gets the same line. A one-off change belongs on a combo class.

Example: a sentence on the services page ends with the words Read the guide, and those words open the existing guide page. Select that text link, set Line to underline, and set Thick so the line is visible without covering the letters. Leave the heading Pricing without a line. The heading is not a link.

If the link should open in a new tab, that checkbox is in the link settings, not in the decoration settings. The new tab guide is that checkbox. This page is only the line under the words.

Use the underline for a link

On the web, an underline means the text goes somewhere. Webflow's typography guidance says not to underline text just to emphasize it. A visitor can try to click a heading or a price that is only decorated.

For emphasis, use italic or bold, or wrap the words in a span and style that span. A span can change color or weight without looking like a link. The sentence stays one paragraph. The link, if you still need one, keeps the underline.

Example: the word New sits beside a plan name and should stand out. Do not underline New. Highlight New, add a span class, and set a color or a weight on that class. Underline the plan name only if the plan name is the link to the plan page.

Let a parent pass the line down, on purpose

You can set the decoration on a text element, or on a parent that contains several text elements. A decoration on the parent passes to the text inside it, until a more specific style overrides it.

That is useful when every link in a footer should share one line. Select the footer link class, not the whole footer, and set Line there. If you set the decoration on the footer itself, headings and paragraphs inside the footer inherit the line too, and they look clickable when they are not.

The orange inheritance indicator on a style shows that the value comes from somewhere else. Click the orange text to see where. To override it, set Line on the element or class that should differ. The text color guide is the same inheritance idea for color. Color and decoration are separate settings. A blue link is not underlined until Line says so, and an underline does not choose the color.

Body text should stay readable beside the line. Webflow's guidance is to keep body text no smaller than 16 pixels, and to keep paragraph line height at least 1.5 times the font size. The font size guide is that size control. A thick underline on 12 pixel text is harder to read, not clearer.

Reset a decoration you no longer want

To clear a value, click the blue or pink indicator beside it and choose Reset. If the underline was inherited, reset it on the parent or class that set it, or override it on the child.

If the site used custom properties for the decoration, unlink them and use the Style panel. The properties Webflow names are text decoration color, underline offset, decoration thickness, underline position, decoration skip ink, and decoration style. Leaving those properties in place can fight the Line, Thick, Offset, and position controls.

A text stroke is a different typography setting. It draws around the letters. If a stroke does not show, the stroke color may still match the font color, or the width may be very thin. A stroke is not an underline. Set Line when you want the line under the words.

Check the smaller breakpoint after you set the decoration. A style set on desktop cascades down until a smaller breakpoint overrides it. If the phone link should have a thicker line, switch to that breakpoint and set Thick there. Desktop keeps the earlier value.

Publish and click the underlined words

The Designer shows the line. Visitors see it after you publish the domain you care about. Open the live page, click the underlined words, and confirm they open the page you set. Then read the rest of the section and confirm that headings and prices are not underlined unless they are links.

If the line shows in the Designer and not on the live page, publish again to the domain you are viewing. If every text block on the page is underlined, the decoration is on a parent or on a tag such as All paragraphs. Reset that broader style and set Line on the link class only.

An underline on a link you already have is ordinary type work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.