How can I increase the space between text and underline in Webflow, and can the line thickness be adjusted as well?

To increase the space between text and underline in Webflow and adjust the line thickness, you'll need to use custom styling rather than relying on the default underline styling from text decoration.

​

1. Use Border Bottom Instead of Text Decoration

​

• Select the text element (usually a Text Span inside a Rich Text Block or a Text Block).
• Remove the default underline by turning off Text Decoration in the Style panel.
• Add a bottom border instead:
• Set Border Bottom to the desired thickness (e.g., 1px, 2px).
• Choose a Color matching your design.
• Adjust the Padding Bottom to control the space between text and underline.

​

This gives you more styling flexibility compared to the standard underline.

​

2. Adjust Line Thickness

​

• The Border Bottom thickness is the line's thickness.
• Thicker lines: increase the border-bottom size (e.g., 3px or 4px).
• Thinner lines: reduce to 1px or subpixel values (e.g., 0.5px), depending on browser support.

​

3. Adjust Line Position/Spacing

​

• Increase the Padding Bottom to move the underline further from the text.
• Decrease it to pull the underline closer.

​

For example:

• Set Border Bottom = 2px solid #000
• Set Padding Bottom = 4px to create visual spacing.

​

4. Optional: Use Text Span for Partial Underlining

​

• Highlight part of a text element and click Wrap with Span.
• Apply the border and padding changes only to the span for partial underlines.

​

Summary

​

Use border-bottom styling instead of text-decoration to fully control underline spacing and thickness in Webflow. Adjust border thickness and padding-bottom on the text or span element for the desired effect.