Add External Link Arrows to Hyperlinks in Squarespace

Highlight External Links with an Icon in Seconds

Want to make your external links more obvious and intuitive for users? With this lightweight CSS plugin, you can automatically add a small arrow icon next to any bolded hyperlink—helping visitors easily identify outbound links.

Ideal for blogs, portfolios, or affiliate marketing websites.

---

Plugin Details

• Platform: Squarespace 7.1

• Method: Custom CSS

• Effect: Adds arrow icon next to hyperlink text

• Trigger: Bold formatting

• Icon Type: External arrow (default, customizable)

---

Add to Your Site: Copy & Paste the Code

Paste the following code into Design > Custom CSS:

css
// HYPERLINK ARROW ICON (#3) - BOLD THE HYPERLINK TEXT TO APPLY THE ICON - GHOSTPLUGINS.COM //

p a strong:after {
  width: 18px; /* icon width */
  height: 18px; /* icon height */
  margin-left: 5px; /* left spacing */
  margin-right: 2px; /* right spacing */
  filter: invert(0); /* icon color (0 = black, 1 = white) */
  background-image: url('https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66ddf85e81259571daae561c/1725823070523/external_icon_3.png');
  display: inline-block;
  background-size: contain;
  content: "";
  vertical-align: middle;
}

// HYPERLINK - CHANGE BOLD LINK BACK TO NORMAL FONT WEIGHT - GHOSTPLUGINS.COM //

p a strong {
  font-weight: normal;
}

---

How to Use It

• In Squarespace’s editor, highlight your link text and click the Bold icon.

• The arrow icon will appear next to the hyperlink.

• Only works with bolded links inside <p> blocks (paragraph text).

To apply the icon to header links, replace p with h1, h2, h3, or h4 depending on your header level.

---

Customization Options

Option	Description
Icon Size	Adjust width and height values
Spacing	Change margin-left and margin-right
Color Invert	Use filter: invert(1) for white icons
Your Own Icon	Upload to Manage Custom Files and replace URL

---

Bonus Tip: Use Custom Icons

Want to use your own brand's arrow or affiliate icon?
Upload your image via Design > Custom CSS > Manage Custom Files and swap the URL in background-image:.

---

Need Help or Want Custom Features?

Whether you want more icon styles or need assistance implementing this effect on headers or buttons, I’ve got you covered.

📞 Chat on WhatsApp: https://wa.me/+8801717691382
📅 Book a free consultation: https://calendly.com/website_consultation/meeting
🌐 See my portfolio: https://www.squarespacewebexpert.com

Let’s improve your site’s UX with smart, simple CSS tweaks like this.