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 an underline in Webflow and adjust the underline thickness, you need to use custom styling since Webflow’s native text decoration options are limited.

1. Add a Custom Class to the Text Element

• Select the text element you want to style (e.g., a link or paragraph).
• In the Selector Field, add a class (e.g., custom-underline).

2. Use “Text Decoration” or a Bottom Border

To control spacing and thickness more flexibly, use a bottom border instead of an underline.

• Go to the Style panel for your text element.
• Scroll to the Borders section and set:
• Bottom Border: Add a bottom border (e.g., 1px solid #000).
• Adjust the thickness using the border size (in pixels).
• Create space between the text and the line using padding-bottom (e.g., padding-bottom: 4px).

3. Hide Native Underline (for Links)

If applying this to a link:

• In the Typography section, set Text Decoration to None to remove the default underline.

4. Optional: Add Custom Code for Advanced Control

If you need non-standard underline styles (e.g., wavy, dashed):

• Add a custom <style> tag in Page Settings > Custom Code or in the Embed element with a class-based rule:
• Use text-decoration: underline with text-decoration-thickness and text-underline-offset for modern browsers.
• Example: .custom-underline { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

Summary

Use a bottom border for full control over underline thickness and spacing, or apply custom CSS with text-underline-offset and text-decoration-thickness for more CSS-native styling. Webflow's visual editor supports borders better for this purpose than native underline controls.