How can I remove the blue underline in a text placed inside a link block in Webflow?

Published on
September 22, 2023

To remove the blue underline in a text placed inside a link block in Webflow, you can use custom CSS code. Follow the steps below:

  1. Identify the class or selector of the link block you want to modify. You can find the class name by selecting the link block, and on the right-side panel, look for the "Class" field.

  2. Once you have the class name, navigate to the Custom Code section in your Webflow project. To do this, click on the gear icon on the left-side panel and select "Custom Code."

  3. In the Custom Code section, click on the "Head" tab.

  4. Add the following CSS code to target the link block and remove the blue underline:

<style>  .your-class-name a {    text-decoration: none;  }</style>

Replace "your-class-name" with the actual class name of your link block. This code will remove the underline from all links within the specified link block.

  1. Save your changes.

After completing these steps, the blue underline should no longer appear within the text placed inside the link block.

It's important to note that removing the underline may affect the accessibility and user experience of your website. Consider using alternative visual cues to indicate clickable elements to ensure that the links are still apparent to all users.

Additional Questions:

  1. How do I modify the appearance of links in Webflow?
  2. Can I change the color of the underline in a link block in Webflow?
  3. How can I style links differently on hover in Webflow?