External link marker

A small CSS snippet that adds an arrow (↗) next to external links, so readers can tell at a glance when a link leads away from your site.

The idea comes from paritybit.ca and was later adapted for Bear by jbowdre. Since that page is no longer online, I decided to make this updated version.

Preview

External link marker, an arrow shown next to a link leading away from the site

How to use

Replace YOUR_DOMAIN with your actual domain (for example yourblog.bearblog.dev), then add the styles below to your theme.

/* External link marker | robertbirming.com */

main a[href^="http"]:not([href*="YOUR_DOMAIN"])::after {
  content: "\00a0↗\FE0E";
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 0.9em;
  text-decoration: none;
  vertical-align: super;
  white-space: nowrap;
  color: color-mix(in srgb, var(--text-color), transparent 20%);
}

main a[href^="http"]:not([href*="YOUR_DOMAIN"]):has(img)::after {
  content: none;
}

The first rule adds the arrow, the second makes sure image links don't get one.

Happy blogging, and happy linking.

Want more? Check out the full Bear Blog library.