Can the underline color in a text link be changed in Webflow without altering the text color?
TL;DR
- Select text link in Webflow Designer, adjust text color in the Styles Panel.
- Add custom CSS in the Project Settings' Head Code section, specifying underline color.
- Apply the custom class to the text link and publish the project.
Changing the underline color of a text link in Webflow while keeping the text color unchanged is a specific styling task. Here's how you can achieve this.
1. Use the Custom Style Option
- Select the Text Link you wish to modify in the Webflow Designer.
- In the Styles Panel, go to the Typography Section.
- Set the text color to your desired choice if you haven't already.
2. Add Custom CSS for Underline Color
- Open the Project Settings and navigate to the Custom Code tab.
- In the Head Code Section, add your custom CSS. For example:
```css
<style>
.custom-link-underline {
text-decoration: underline;
text-decoration-color: blue; / Your desired underline color /
}
</style>
```
- Replace
"custom-link-underline"with your specific class name.
3. Apply the Custom Class
- Return to the Webflow Designer and select the Text Link again.
- Assign or add the same custom class (e.g.,
.custom-link-underline) to the link.
4. Check Published Site
- Ensure you publish your project to see the changes reflected on the live site.
Summary
To change the underline color of a text link without altering its text color in Webflow, you should add a custom CSS class that specifies an underline color. Apply this class to your text link, and ensure the custom CSS is added in Project Settings.