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. This add-on works with any Bear theme, no tokens needed.

Here's an external link and here's an internal one - only the external one gets the arrow.

How to use

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

Styles

/* External link marker | robertbirming.com */
main a[href^="http"]:not([href*="YOUR_DOMAIN"])::after {
  content: "\00a0↗\FE0E";
  font-size: 0.7em;
  text-decoration: none;
  display: inline;
  vertical-align: super;
  white-space: nowrap;
  color: var(--muted);
}

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

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

Want more? Check out the add-ons. Happy blogging, and happy linking.