How to remove underline from "Read More" blog link on Squarespace
The "Read More" link in your blog summaries or excerpts on Squarespace can help guide visitors to the full post. However, by default, this link often comes underlined, which might not always match your site's aesthetic. In this tutorial, you’ll learn how to remove the underline from the "Read More" blog link using a simple CSS snippet in Squarespace 7.1.
Table of Contents
Why Remove the Underline?
Design consistency: Clean, modern websites often avoid link underlines for stylistic reasons.
Customization: Allows more control over how blog summaries appear.
User experience: Still clickable, but without the visual clutter.
Complexity: Easy
Step-by-Step Instructions
Step 1
Copy the code below and from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
/* Remove underline from Read More blog links */ .blog-more-link:after { display: none; } /* Optional: Change the color or add hover effects */ .blog-more-link:hover:after { display: none; color: #ff5500; /* Customize this color */ }
Step 2
The underline link on ‘Read More’ is removed.
Key Takeaways
Target
.blog-more-link
to customize Read More links.Removing underlines gives a cleaner visual look.
Add hover styles to maintain accessibility.
FAQs
Will this affect all links on my site?
No, it only affects the “Read More” links inside blog blocks. All other links remain unchanged.
Can I style the link differently on hover?
Yes! You can use the :hover
pseudo-class to change the color, weight, or add effects.
What if the underline still appears?
Check if any conflicting styles exist in site styles or other CSS overrides. Try adding !important
to force the change.
Conclusion
Customizing the appearance of “Read More” links is a quick and easy way to refine your blog layout and match your brand’s design. With just a bit of CSS, you can remove underlines, adjust hover effects, or even add icons for a more engaging and stylish blog experience.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.