How to Remove Underline from Links in Webflow

Links commonly and by default come with an underline as apart of their styling across the majority of the internet and Webflow is no exception. Whether you're using a Text Link, Link Block, or Rich Text Element, any included text will have an underline by default. In this guide we're going to explain how to remove this underline from each of the applicable Webflow elements, including custom code blocks (Embed Elements).

How to remove underline from links

Link underline can be removed by adjusting the text-decoration CSS property. The text-decoration CSS property controls whether text gets an underline, overline, strikethrough (line-through), or none of the above.

Text Decoration Examples

text-decoration: none; | looks like this
text-decoration: underline; | looks like this
text-decoration: overline; | looks like this
text-decoration: line-through; | looks like this

Webflow gives us the option of setting the text-decoration property to any of these values right inside the Designer. The process varies slightly depending on which Webflow element we're using - we'll explore these differences below.

Text Blocks and Links Blocks

To remove underline from Text Links and Link Blocks perform the following steps inside the Webflow Designer:

Step 1: Click on the Text Link or Link Block

Selecting a Link Block and Text Link inside the Navigator

Step 2: Find the "Decoration" section of the Style menu

Showcasing the Decoration section of the Style menu

Step 3: Adjust this setting to either none, strikethrough, or overline as needed

Selecting none, overline, or strikethrough in the Decoration section of the Style menu

Rich Text Elements

To remove underline from links inside of a Rich Text Element, perform the following steps inside the Webflow Designer:

Step 1: Click on the Rich Text Element

Selecting a Rich Text Element in the Navigator

Step 2: Ensure the Rich Text Element has a class

In order to style elements within a Rich Text Element, it must have a class associated with it. If it doesn't, click on the text box and type one out before pressing Enter on your keyboard.

Checking whether the Rich Text Element has a class or not in the Style menu

Step 3: Find a link inside the Rich Text Element and click on it

Selecting a Link Element contained within a Rich Text Element

Step 4: Add Styling to links inside the Rich Text Element

With the link selected, click on the class field and select "All Links"
An additional option will appear below the class field allowing you to nest your selector inside of the Rich Text Element's class
Click on that option

Getting ready to apply styles to a nested Link Element inside a Rich Text Element

Step 5: Adjust the Text Decoration property as needed to none, strikethrough, or overline

Finding and setting the Decoration section of the Style menu

Embed Elements

If you're looking to remove link underlines from inside an embed element, we'll need to do so using some custom code - specifically some vanilla CSS.

For example if you have an anchor tag (link) in your embed element that is rendering with an underline, you can select it with CSS and remove the underline using the via the example code below.


<style>
.test-link {
	/* none | overline | line-through */
	text-decoration: none;
}
</style>

<!-- This is our link, with the class test-link -->
<a class="test-link" href="https://google.ca">This is a test link</a>

An example of a link being styled inside an Embed Element — This is the same code as the code snippet above, shown inside the Webflow Designer for reference.

Written by...

Matt Lawrence

When I'm not tinkering with websites and servers, I'm gaming it up....or writing something

How to Remove Underline from Links in Webflow