How to remove underline from links in Squarespace 7.1
** UPDATED March 2023 **
By default, links on Squarespace websites often come with underlines. While this helps indicate clickable elements, it may not always align with your desired design aesthetic. In some cases, removing the underline from links can create a cleaner, more modern look.
This tutorial will guide you through how to remove link underlines on your Squarespace 7.1 website using a simple CSS snippet.
Table of Contents
Why Remove Underlines?
To match your brand’s visual identity
For a cleaner and minimal design
To have more control over link styling
Complexity: Easy
Step-by-Step Instructions
A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="5f561a6cfab9b365a25a1e21"] is a Chrome Extension called Squarespace ID Finder.
All Links
Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the appropriate code below
a {
text-decoration: none !important;
}Links in the Header
.header-nav-wrapper a {
background-image: none !important;
}Links in the Footer
footer a {
text-decoration: none !important;
}Links on a Specific Page
#collection-id a {
text-decoration: none !important;
}Links in a Specific Section
section[data-section-id="[SECTION-NUMBER]"] a {
text-decoration: none !important;
}Links in a Specific Block
#block-id a {
text-decoration: none !important;
}Key Takeaways
Use
text-decoration: none;to remove underlines from links.Always ensure links are still visually distinct for usability and accessibility.
Use hover states like
underlineorcolor changesto help users identify clickable text.
FAQs
Will this remove underlines from all links?
Yes, the default CSS targets all <a> elements sitewide. You can limit it to specific sections with class selectors.
How do I keep underline only on blog links or content areas?
Use specific class targeting like:
.blog-item a { text-decoration: underline; }
What if I’m using a custom font that affects links?
Fonts can affect link appearance. Use the CSS above to override any default styles.
Conclusion
Removing link underlines in Squarespace 7.1 is a quick way to achieve a more polished and modern aesthetic. With a bit of custom CSS, you gain full control over how your links appear and interact—enhancing both style and usability.
