Styling for external links

This snippet will let you style an external link differently than an internal link. You can do anything you want to the links, in this case it’s adding a little arrowing pointing out, sort of like what you see on Wikipedia links.

a[href*="//"]:not([href*="ian.ist"])::after
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' class='h-5 w-5' viewBox='0 0 14 14' height='15px' width='15px'  %3E%3Cpath fill='%235c5c5c' d='M8.001 0a.997.997 0 0 0-.862 1.499.988.988 0 0 0 .862.498h2.585L4.295 8.288A1.002 1.002 0 1 0 5.71 9.703l6.292-6.291v2.585a.998.998 0 0 0 1.499.864.996.996 0 0 0 .499-.864V1.002C14 .447 13.552 0 12.996 0H8.001Z' paint-order='fill'/%3E%3Cpath fill='rgba(194,194,194,.8)' d='M2 2a2 2 0 0 0-2 2.001v8.011a2 2 0 0 0 2 2h8.012a2 2 0 0 0 2-2V9.006c0-.77-.837-1.25-1.503-.865a.997.997 0 0 0-.497.865v3.006H2V4.001h3.006a.999.999 0 0 0 .865-1.5A1.004 1.004 0 0 0 5.006 2H2Z'/%3E%3C/svg%3E")
  background-position: center right
  background-repeat: no-repeat
  padding-right: 1em