How to remove the link underline (again) in Squarespace 7.1
Table of Contents Show
📌 Pin it!
By now you've probably noticed that Squarespace has been changing seemingly unnecessary things again, and one of those changes is the way inline text links are displayed with an underline.
The code for the update is different now, so the original snippet that hid that text link underline no longer works by itself.
🤦🏻♀️ GAH! Womp. Womp.
Good news is, it’s a super simple fix and I’m handing over the CSS snippet to fix it. Fo’ free. Because I’m awesome. 😉
And if you never had a snippet to rid yourself of that link underline & you want it, don't fret! This CSS snippet will work for you too.
CSS Fix
Removing the link underline in 7.1 if your old CSS isn’t working now
Sometime in early 2021, Squarespace adjusted the way the text link code works on the backend (like, not the part we can edit) and so our old snippet to hide that link underline is no longer working.
After doing a bit of research & troubleshooting, I found some extra bits that solve the problem, …again. 😏
How & what do you do to fix it?
from your main menu click Design (in Squarespace),
click Custom CSS,
copy this code snippet below,
then paste that snippet into that CSS code area
/* styling link underlines sitewide */
.sqs-block-html a {
background-image:none!important;
}
.sqs-block-html h1 a, h2 a, h3 a, h4 a, p a {
border-bottom-style: none !important;
text-decoration-line: none !important;
}Save your changes.
That’s it! You’re welcome. 😁
Why you might want to think twice about removing that underline
Website accessibility is a hot(ter) topic now and understandably so. With so many online businesses it’s becoming more & more probable that someone with a disability you don’t have, will access or want to use your site, and they should be able to do so. Right?
With an online business, the ONLY way people can interact with our “front lobbies” so to speak is to use our websites, so we need to be putting more thought into how people unlike ourselves might be using them. Not gonna lie, it’s a hard thing to do & often the most creative designs fight with the most user-friendly content.
Luckily, Squarespace makes it easy for us by putting in that underline as a DEFAULT and forces us to add a CSS override to remove it. Why do they make it so hard to get rid of it? Because they don’t really want us to, guys! It’s that simple. 😂
When we remove that underline, it may look better (or maybe just less reminiscent of those blue HTML hyperlinks of old 😬) to us, but it also makes it harder to distinguish where the links are for some of our viewers.
Think about it: if color is the only differentiator between text and linked text in the same paragraph, and your viewer can’t see the color contrast between the plain text and the linked text… they won’t just inherently KNOW there’s a link there to be clicked!
So, use this snippet if ya want, –or don’t & keep Squarespace’s underlines now that you know why they exist. 😉
