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

1. Use Custom CSS with Text Decoration Properties

• Webflow doesn’t currently offer direct controls for underline spacing or thickness in the Style panel.
• To customize underline appearance, you’ll need to use the text-decoration-thickness and text-underline-offset CSS properties.
• Go to the Page Settings or add a Custom Code Embed where this text is used.

Example of styles you can include:

• text-decoration-thickness: 2px;
• text-underline-offset: 6px;

2. Apply Custom Class and Custom CSS

• Add a class to the text element (e.g., custom-underline).

• Then, go to your Page Settings → Inside <style> tags in the code or use a “Before ” Embed block and add:

  <style> .custom-underline { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } </style>

• Replace values as needed for your specific design.

3. Alternative: Simulate Underline with Border-Bottom

• You can also create an underline effect by using border-bottom instead of text-decoration.
• Add a class to the text element and set:
• Border Bottom = 1–2px
• Padding Bottom controls the space between text and the line

Pros:

• Full control over spacing and color
• Works visually the same as underlining

Cons:

• Not semantically the same as text-decoration: underline

Summary

To adjust underline spacing and thickness in Webflow, apply custom CSS using text-underline-offset and text-decoration-thickness, or simulate the effect with border-bottom and padding-bottom. These options provide full control over the underline appearance.