How can I remove the underline in paragraph text within a link block on my Webflow site?
TL;DR
- Select the paragraph inside the link block, add a class to it, and set Text Decoration to None in the Style panel.
- Check the link block’s hover/visited states and use custom CSS if underline persists.
To remove the underline from paragraph text inside a link block in Webflow, you need to override the default link styles.
1. Select the Paragraph Element
- Click on the paragraph element inside your link block in the Webflow Designer.
- Make sure it's specifically the paragraph, not the link block parent.
2. Create or Apply a Class
- If it doesn’t already have a class, add a new class to the paragraph. This will allow you to apply custom styles just to that element.
3. Remove the Underline
- With the paragraph selected, go to the Style panel on the right.
- Scroll down to the Typography section.
- Click on the underlined "U" icon to toggle off Text Decoration (Underline) if it’s enabled.
- Make sure Text Decoration is set to "None", especially when the paragraph is inside a link.
4. Check the Link Block Style
- Sometimes, the link block's hover or visited state may be inheriting or forcing the underline.
- Select the link block, go to the hover state, and confirm that it’s not applying an underline style to child elements.
5. Use Custom Styling if Necessary
If the underline persists due to browser defaults or nested styles, you may need to add a custom CSS rule under Project Settings > Custom Code (before ):
Inline example:
style="text-decoration: none;"can be applied inside the Embed element targeting the paragraph if needed.
Summary
To remove the underline from a paragraph in a link block, apply a class to the paragraph and set Text Decoration to None in the Style panel. Also, check the link block’s hover/visited states for inherited underline styles.