How to add an arrow to the read more blog link

The "Read More" link is a subtle yet crucial part of your blog layout. It encourages users to continue reading, but by default, it can look a bit plain. A simple way to enhance its visibility and visual appeal is by adding an arrow icon next to it—either a symbol, Unicode character, or even a custom SVG.

In this tutorial, we’ll walk through how to add an arrow to your blog “Read More”.

Table of Contents

• Why Add an Arrow to "Read More"

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Add an Arrow to "Read More"?

• Improves Click-Through Rates: Arrows draw attention and can increase engagement by acting as a visual cue to take action.

• Enhances Visual Design: A small arrow adds polish and a modern aesthetic to your blog section.

• Maintains User Flow: Makes it easier for visitors to scan and interact with multiple blog posts quickly.

Complexity: Easy

Step-by-Step Instructions

Simply add the following CSS code to Design > Custom CSS.

Squarespace 7.0

/* Read More Blog Link */
Method 1
--------

.BlogList-item-readmore span:after {
  content: "➔";
  font-size: 1em;
  padding-left: 5px;
  transition: transform 0.3s ease;
}

.BlogList-item-readmore span:hover:after {
  transform: translateX(5px);
}

Method 2
--------

.BlogList-item-readmore span:after {
  content: "";
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="black"><path d="M2 1l6 5-6 5V1z"/></svg>') no-repeat;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.BlogList-item-readmore span:hover:after {
  transform: translateX(5px);
}

Squarespace 7.1

/* Read More Blog Link */
Method 1
---------
.blog-more-link::after {
  content: "➔";
  font-size: 1em;
  padding-left: 5px;
  transition: transform 0.3s ease;
}

.blog-more-link:hover::after {
  transform: translateX(5px);
}

Method 2
---------
.blog-more-link::after {
  content: "";
  display: inline-block;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="black"><path d="M2 1l6 5-6 5V1z"/></svg>') no-repeat;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  transition: transform 0.3s ease;
}

.blog-more-link:hover::after {
  transform: translateX(5px);
}

You can then adjust the padding value to your desire size.

HTML Unicode Arrow List
w3schools.com
Toptal
HTML Symbols

---

Key Takeaways

• You can enhance blog post links with an arrow using just CSS—no JavaScript or plugins needed.

• Unicode arrows are fast, lightweight, and mobile-friendly.

• SVG arrows offer more customisation (like thickness, curve, or color).

• Use ::after pseudo-elements to preserve your site’s structure and avoid adding extra HTML.

FAQs

Will this arrow appear on all blog posts?
Yes. This targets all elements with the .blog-more-link class, which is typically used for "Read More" buttons in Squarespace summaries.

Can I use a different symbol or font icon (e.g. Font Awesome)?
Yes. You could replace the arrow with a Font Awesome icon if you have it enabled, but Unicode arrows are simpler and don't require external libraries.

Does this work in both Squarespace 7.0 and 7.1?
Yes. it works both versions for blog summaries and links.

---

---

Conclusion

Adding an arrow to your "Read More" link is a tiny detail that goes a long way in guiding visitors and improving your blog’s aesthetics. Whether you're aiming for elegance or a modern call-to-action vibe, it's a quick win with a big payoff.