How to Remove Underlines from Links on Your Squarespace Website

Sometimes, you might want a clean, underline-free look for the links on your Squarespace website. If that’s the aesthetic you’re aiming for, removing underlines is straightforward. Here’s how you can do it:

Remove Underlines for All Links Site-Wide

To remove link underlines across your entire Squarespace site, follow these steps:

1. Go to the Design Menu: Navigate to your Squarespace dashboard, then go to the Design menu (Website Tools) and select Custom CSS.

2. Add the CSS Code: Copy and paste the following code into the CSS block:

   css

   a { text-decoration: none !important; }

This code will remove the underlines from all links on your site, affecting every page and blog post. If you prefer to target specific areas, keep reading.

Remove Underlines in the Header and Footer

If you only want to remove underlines from links in the footer:

• Add Footer-Specific CSS: Copy and paste this code into your Custom CSS:

  css

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

For the header links, the approach is different because they use a background image for underlines:

• Add Header-Specific CSS: Copy and paste this code:

  css

  header a { background-image: none !important; }

Remove Underlines on a Specific Page

To remove underlines from links on a specific page or blog post:

1. Find the Page ID: Use the Squarespace ID Finder Chrome extension to find the collection ID for the page.

2. Add Page-Specific CSS: Replace COLLECTIONID with your page’s ID and paste this code:

   css

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

Remove Underlines in Specific Sections or Blocks

To remove underlines from links in a specific section:

1. Identify the Section: Use the Squarespace ID Finder to locate the section ID.

2. Add Section-Specific CSS: Replace COLLECTIONID with your page’s ID and adjust the section number in the code:

   css

   #COLLECTIONID #page .page-section:nth-of-type(1) a { text-decoration: none !important; }

To target specific blocks within a section:

1. Find the Block ID: Again, use the Squarespace ID Finder to get the block ID.

2. Add Block-Specific CSS: Replace BLOCKID with the actual block ID:

   css

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

Remove the ‘Read More’ Underline

To remove the underline from the ‘Read More’ link under blog posts:

• Add Read More Link CSS: Copy and paste this code:

  css

  .blog-more-link::after { background: none !important; }

After removing the underline, you might want to make the 'Read More' link more noticeable by turning it into a button. Check out our tutorial video for detailed instructions on customizing this link into a button and even changing the default text to a custom CTA.

With these CSS snippets, you can easily tailor the appearance of your website’s links to match your desired aesthetic. Happy customizing!