This One Weird Trick Makes Your Links Cooler

by John M. Higginscalendar Aug 06, 2025

You can make your external links (links to pages outside your website) appear with an icon in front of them with this snippet of code.

a[href*="//"]::after {
  display: inline-block;
  background: url('/static/link.svg') no-repeat;
  background-size: 100%;
  margin-left: 0.15em;
  margin-bottom: -0.15em;
  content: "";
  min-height: 0.9em;
  min-width: 0.9em;
}

The CSS selector finds anchor tags with an HREF that contains '//'. This will detect when a URL starts with http://, which should be sufficient to identify whether a link is external or not. (If you use absolute URLs for every link on your site than that's your problem and you will have to figure out some other way to make this work.)

It's important that you supply a min-height and min-width because there isn't any content in the pseudo-element so by default it won't take up any space.