When you add links to Squarespace, it automatically adds an underline to the hyperlink to make it stand out from the rest of your content. While the thought behind the native feature makes sense, the underlines that appear on hyperlinks can totally ruin the aesthetic of your website, in my humble opinion.

The underlines are especially frustrating in the website footer, where users can automatically presume most elements are links without the need for the lines underneath. In this blog post, I’ll explain how to remove underlines from links on Squarespace and also share with you the code snippet I use to replace it with a cool hover effect instead.

Watch the video

Check out the YouTube video below 👇

How to Remove Underlines From Links on Squarespace Using CSS

To remove the underline from a link with CSS, navigate to your Squarespace custom CSS panel. From here, you need to target “a,” which refers to links on your website. 

Here is an example code to add:

a {
text-decoration: none !important
}

By targeting “a” with this code, you’ll be targeting all of the links of your website, removing the underlines from them all. 

In order to be more specific and target specific links, you need to wrap the code in more { } and add the link type you want to target, e.g., h1 to target your header links or p to target your paragraph links.

To be even more specific, you can wrap the CSS code again and target specific areas of your website by adding, for example, a footer to target only the links within your website footer.

This would look something like:

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

Extra: Adding a Hover Effect to Hyperlinks

Once you’re able to remove underlines with CSS, you may want to continue styling links by adding a hover effect, meaning when the user hovers over the link, the link will change.

In order to do this, you need to return to your original link code from above and add the following code within the original brackets:

transition: 0.3s : important;
&:hover {
opacity: 0.7;
transition: 0.3s !important
} 

So the overall code would be:

 a {
text-decoration: none !important;
transition: 0.3s : important;

&:hover {
opacity: 0.7 !important;
transition: 0.3s !important;
}
}

This will tell Squarespace to add a hover-in for 0.3 seconds and a hover-out for 0.3 seconds when a user hovers over the link.

As always, you can play around with the speed and opacity in order to reach your desired hover effect. You can also change the color of a link on hover.

Don’t forget to hit save, and you’ll have removed the underlines from your hyperlinks and instead replaced them with a much more aesthetically pleasing and user-friendly hover effect.

Tip: If you’re a blogger, check out my post on how to remove the underline from the “Read More” blog link on Squarespace.

While you must have a reason for wanting to remove underlines from links with CSS properties, is there more to this simple change? Continue reading to know my thoughts on why removing an underline from hyperlinks may be necessary.

Why Remove Underlines From Squarespace Hyperlinks?

As developers, we’ve long relied on underlines to signify importance or clickable links. However, as web trends evolve, we must reassess the use of underlines. Let’s explore why eliminating underlines could be a positive step forward.

1. Enhances Clarity and Visual Appeal

In the past, underlined text was a standard indicator of a link. But in today’s web design, the emphasis is on creating clean and easily digestible websites. By removing underlines, we can achieve a less cluttered and more visually appealing look. Think of underlines as unnecessary distractions — their absence allows users to focus on the content without unnecessary visual noise.

2. Improves Readability and Accessibility

Underlines can hinder text readability, particularly affecting letters with descenders like ‘g’ and ‘y,’ creating potential reading obstacles. For individuals with conditions like dyslexia, underlines can exacerbate reading difficulties. However, the removal of underlines doesn’t impede website usability. As designers, we have alternative methods, such as color differentiation and bold text to indicate clickable links.

3. Facilitates Brand Identity Alignment

Every aspect of a website should align with the unique style of the brand it represents. Underlines may appear outdated and out of sync with a brand’s visual identity. By eliminating underlines, designers can utilize the company’s colors and fonts to highlight links in a manner that harmonizes with the brand.

4. Enhances User Experience

In the absence of underlined links, alternative visual cues such as color changes or subtle icons can be employed to guide users to clickable elements. This approach fosters a more deliberate and attentive interaction with links, contributing to an improved user experience.

5. Facilitates User Engagement

For websites with substantial content, such as news platforms, the removal of underlines can facilitate a smoother reading experience. Instead of diverting attention, links seamlessly offer additional information without interrupting the reading flow.

Removing underlines is all about achieving the right equilibrium. The website should not only look visually appealing but also remain user-friendly. Once you’re able to remove underlines from links with CSS, It’s crucial to ensure they remain easily identifiable through smart design choices. Continue reading for some tips when it comes to introducing hyperlinks to your website.

7 Best Practices for Hyperlinks on Squarespace

Getting hyperlinks right is crucial because they help people find their way around and ensure they have a good time on your web page. So, let’s talk about some of the best practices for using hyperlinks in web design.

1. Make Sure Everyone Can Use Your Links

First, let’s talk about accessibility. This means making sure that everyone, including people with disabilities, can use your website easily. For hyperlinks, this means choosing colors that stand out from the rest of the text so people with vision problems can identify them.

Also, when someone uses a screen reader (a tool that reads out the content of a website), your links should make sense out of context. So instead of “click here,” use descriptive text like “read more about best practices for hyperlinks.”

2. Utilize Hover Effects

Hover effects are like little hints that pop up when you move your mouse over a hyperlink. They can change the color of the link, underline it, add a background image, or make some other subtle change that says, “Hey, I’m clickable!” This is super useful because it gives immediate feedback to your visitors so that they can interact with that text.

3. Use Visual Cues

While underlines are one way to show a link is embedded in a text, there are other visual cues you can use. For instance, you could make your links a different color or font size from the rest of the text. Just pick a color that’s not too harsh on the eyes but still stands out.

Some websites use bold text and background color for links, or they might edit their HTML code to put an icon next to them, like a little arrow or chain link. These are all visual hints that tell visitors, “You can click on this.”

4. Ensure Consistency

Whatever style you choose for your hyperlinks—whether you’re underlining them, changing their color, or using icons—keep it consistent throughout your site. This helps your visitors get used to what your links look like, so they don’t have to guess what’s clickable and what’s not.

5. Keep It Clear and Simple

A hyperlink should always give a clear idea of where it will take the visitor. Use simple, straightforward language that tells them what to expect when they click on it. “View our selection of gardening tools” is way more informative than just “products.”

6. Test Your Links

After setting up your links, test them out. Make sure they’re easy to spot and that they work as expected. It’s a good idea to ask someone else to test them, too, because they might spot issues you didn’t notice. This is particularly helpful if you not only want to add URL links but also file, email, and phone links, as supported by the new Squarespace link editor.

7. Don’t Forget Mobile Users

With mobile accounting for more than half of web traffic, it’s important to make sure your hyperlinks are easy to tap with a finger. Nothing’s more frustrating than trying to click a tiny link on a phone screen and ending up on the wrong page.

In summary, hyperlinks are a big part of web design, and it’s important to get them right. They need to stand out but not be too in-your-face. They should be easy to find and use for all visitors, including those with disabilities. With thoughtful design and consistent cues, you’ll create a user-friendly website that people will love to explore. Remember, the goal is to make the web a place where everyone can click around with ease.

📩 Join the inner circle to get exclusive code updates

Frequently Asked Questions

How do I get rid of the underline in Squarespace links?

To remove underlines from links in Squarespace using CSS, go to the Custom CSS section and add the following code: 

a {

text-decoration: none !important

}

This CSS rule selects all anchor elements (‘a’) and sets their text-decoration property to ‘none,’ helping to remove the underline from your hyperlinks.

Which property is mostly used to remove underlines from links?

The text-decoration CSS property is most commonly used to remove underlines from links in CSS. To do so, you would set it to none with the rule a { text-decoration: none; }. ‘a’ is the anchor tag.

Why are my hyperlinks underlined?

Your hyperlinks are underlined because in CSS, the default style for hyperlinks set by HTML/CSS includes text decoration, which is typically an underline. This is a visual indicator to users that the text is interactive and can be clicked on.

Conclusion

By following the steps outlined in this post, you can not only remove underlines from links on Squarespace using custom CSS but also introduce a hover effect for improved aesthetics. Experiment with the different codes shared in this post to transform your user experience, improve readability, and more! Don’t forget to implement the best practices I outlined for best results.

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

Want more?