How to Remove Underline from Links in Squarespace
This post may contain affiliate links. I may earn a commission at no extra cost to you if you make a purchase through them. Full disclosure here.
How to Remove Underline from Links in Squarespace?
If you have a Squarespace website, you might have noticed that all links are automatically underlined by default. While this is a common design convention to indicate clickable text, it may not always fit your desired aesthetic.
Fortunately, you can easily remove link underlines using custom CSS in Squarespace.
Remove Underlines for Your Entire Website
To remove underlines from links across your entire Squarespace website:
Log into your Squarespace dashboard and click on "Design" in the top menu.
Select "Custom CSS" from the left sidebar.
Add the following CSS code:
a {
text-decoration: none !important;
}
Add the following CSS code:
cssa {
text-decoration: none !important;
}
Click "Save" to apply the changes.
This code targets all "a" elements (links) on your site and removes the default underline using the text-decoration property.
Remove Underlines from Specific Areas
If you only want to remove underlines from links in certain areas like the header or footer:
footer a {
text-decoration: none !important;
}
This will remove underlines from links in the footer only.
For the header, use this code instead:
header a {
background-image: none !important;
}
Header link underlines are actually background images, so this code removes the underline background.
Remove Underlines on a Specific Page
To remove link underlines on an individual page:
Install the Squarespace ID Finder Chrome extension.
Go to the page you want to customize.
Copy the page's collection ID using the ID Finder extension.
In your Squarespace dashboard, go to "Design > Custom CSS".
Add this code, replacing
COLLECTIONIDwith the ID you copied:
#COLLECTIONID a {
text-decoration: none !important;
}
Click "Save".
This targets links on the specific page using its collection ID.
By following these steps and applying the appropriate CSS, you can easily remove underlines from links throughout your Squarespace website or on specific pages and sections. This allows you to achieve a cleaner, more customized look that aligns with your brand and design preferences.
