How to Remove Underline from Links in Squarespace (2024)

Underlines on links are useful as they show visitors that text is clickable at a glance.

We ran a survey and found that 77% of people prefer underlined links!

However, there may be circumstances where you prefer to remove the underline. For example, your readers might find underlined links distracting, or they might take away from the overall look and feel of your site.

You might also want to replace your underlined links with something else entirely… keep reading to find out more!

The good news is that you can remove the underline with a snippet of CSS custom code. Here’s how to remove the underline from links in Squarespace in three easy steps.

Step 1: Grab your code

Copy and paste the following snippet of code.

a {
text-decoration: none !important
}

Step 2: Go to the custom CSS panel

Click on Website and Pages.

Scroll all the way to the bottom of the menu, and under Utilities, click on Website Tools.

Click on Custom CSS.

Copy and paste your code snippet into the box. If there is already code in the box, add the code snippet to the bottom, be sure not to delete anything.

Go back to Website Tools to save your code.

Step 3: Test your code

Go onto a page on your site with links, and check that the underline no longer shows.

If you want to add underlined links back in, go back to the Custom CSS code section from step 2, find your code, and delete it.

And that’s all there is to it!

What if I only want to remove the underline from links on specific pages?

The code above will remove the underline from all the links on your website. However, it’s possible to adapt it if you only want to change the links on certain pages.

Remove the underline from your footer

Some people like to take the underline off links in their footer to make the section cleaner and remove distractions. Just add the following code to your Custom CSS section.

footer a {
text-decoration: none !important;
}

Remove the underline from a specific page

For consistency, I’d recommend keeping how your links look the same across your site so that visitors know what to expect.

However, there might be circumstances where you want to remove underlines from only one page. Perhaps you’re creating a landing page styled differently from the rest of your site, or you have a page with a lot of links, and you don’t want to distract people.

To use this code you need to know what the collection ID of the page is – I recommend downloading the Squarespace ID finder.

Then add the following code to your Custom CSS section – replace #COLLECTIONID with your page ID.

#COLLECTIONID a {   
text-decoration: none !important;
}

Bonus! What can I use to customize my links instead?

While Squarespace lets you remove the underline from links, it’s still essential to show that your link is visually different from the surrounding text.

Otherwise your web visitors will be frantically running their mouse over your page trying to find out what’s clickable and what isn’t!

Spark Plugin has four fantastic click-friendly animations to transform the links on your website. Choose from:

The animated line

Who said an underlined link has to be static and boring? This animated link will make your website visitors eager to get clicking!

The color block

Vivid and fun, when someone hovers over this link, it transforms into a bright block of color. Plus, you can change the color to match your site’s branding.

The shadow

Slightly less intense than the color block, this customization adds a subtle animated shade to your link. Ideal if you want your link to stand out but still be understated.

The rollover

Hover over this link, and an underline falls from the text. Simple, clean, and effective.

As well as these link animations, you get over 100 fantastic customizations to transform the look and feel of your Squarespace website.

Claim your free 14-day trial today and build a unique website that drives clicks and conversions.