Skip to content

Instantly share code, notes, and snippets.

@miguelmota

miguelmota/external_link_arrow.txt

Last active August 11, 2025 16:14
Show Gist options
  • Save miguelmota/322c89234d60de578f37d3c6d30f7e41 to your computer and use it in GitHub Desktop.
Save miguelmota/322c89234d60de578f37d3c6d30f7e41 to your computer and use it in GitHub Desktop.
Download ZIP
Unicode UTF-8 external link arrow symbol (closest thing to it)
@MikeiLL
Copy link

MikeiLL commented Aug 11, 2025 

/* Add an indicator after external links that'll open in a new window. */
a[target="_blank"]::after {
  /* ↗, but nicer. SVG adapted from Inter's rendition of "↗". */
  content: url("data:image/svg+xml,%3Csvg viewBox='0 0 7 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.04261 6.80966L0.377841 6.14489L5.32102 1.19318H1.50284L1.51136 0.272727H6.90625V5.67614H5.97727L5.9858 1.85795L1.04261 6.80966Z' fill='black'/%3E%3C/svg%3E%0A");
  /* inline => inline-block, so that we can give it a height */
  display: inline-block;
  height: 0.5em;
  padding-inline: 0.2em;
  aspect-ratio: 1;
  line-height: 1;
  vertical-align: text-top;

  @media (prefers-color-scheme: dark) {
    filter: invert(100%);
  }
}

Nice. Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment