Automatic icons for external links

Credit to Chris Ferdinandi for this tip.

TIP

Make sure to replace example.com with your own site's URL.

[href^="http"]:not(.btn, :has(svg)):not(
    [href^="https://example.com"],
    [href^="http://localhost"]
  )::after {
  background-color: currentColor;
  content: "" / "(external link)";
  display: inline-block;
  margin-block-end: -0.1ch;
  margin-inline-start: 0.5ch;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/><path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/></svg>');
  mask-size: cover;
  height: 0.8em;
  width: 0.8em;
}