Can the underline color in a text link be changed in Webflow without altering the text color?
TL;DR
- Add an Embed element and insert custom CSS to define
text-decoration-colorfor a specific class. - Apply the custom class to text links in Webflow.
- Alternatively, set text decoration to "None" and use
border-bottomfor a manually styled underline.
Yes, you can change the underline color of a text link in Webflow without altering the text color by using custom CSS. Here's how:
1. Use Custom CSS in an Embed Block
- Drag an Embed element onto your page.
- Paste the following CSS inside the Embed block:
```css``` - Apply the “custom-link” class to your text links in Webflow.
2. Use Webflow’s Built-in Styling Options (Limited Approach)
- Set text decoration to “None” for your link in the Style panel.
- Manually add an underline effect using a border-bottom with a custom color.
- Adjust the border's thickness, spacing, and style (solid, dashed, etc.).
Summary
Webflow doesn’t allow independent underline color control by default, but you can override this using custom CSS. The border-bottom trick also works but may require spacing adjustments.