How can I fix the issue with blue underlined formatting overriding my text formatting for text links in Webflow?
TL;DR
- Assign a custom class to the text link and set the desired text color and text decoration in the Style panel.
- Style all link states (including Hover) and optionally use the "All Links" tag for global changes, ensuring there are no overriding inherited styles or combo class conflicts.
Webflow sometimes applies default browser styles like the blue underline to text links, which can override your custom formatting if not explicitly set. Here's how to fix it:
1. Identify the Affected Element
- Select the text link in question on your Webflow canvas.
- Check the class name applied. If there is no class, assign a meaningful custom class to control its styles.
2. Set Custom Link Styles
- With the link selected, go to the Style panel.
- Under Typography, set:
- Text color to your desired color (e.g., black, white, accent).
- Text decoration to none if you want to remove the underline.
- Ensure any inherited styles (from parent classes or tags) are not overriding your custom class. You can check this by reviewing the Selector field in the top of the Style panel.
3. Override All States
- In the Style panel, switch to the “All Links” tag selector by typing
ain the selector field. - Apply your desired base styles (text color, decoration).
- Important: Add styling for hover states, such as color or underline. Click into “States” dropdown and select Hover, then set the appropriate styles.
4. Check for Conflicting Combo Classes or Global Tags
- If you're using combo classes (e.g.,
Hero Text + Link), make sure the link-specific styling is applied to the correct base class or combo class. - For site-wide control, you can style the All Links global tag in the Style panel, but beware of conflicts if other classes are more specific.
5. Publish and Preview
- Publish your site to your custom domain or Webflow subdomain.
- View it in a live browser to ensure the browser default blue color and underline are no longer overriding your styles.
Summary
To remove default browser styling (like blue underlines) from text links in Webflow, apply a custom class, explicitly set the text color and decoration, and style all link states including hover. For global changes, you can also style the All Links tag selector.