External link icon Base64 Data URI

External link icon Base64 Data URI.MD

A specific domain:

<style>
a[href ^= "http://thecustomizewindows.com"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}
</style>

All external URLs :

<style>
a[href ^= "http"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}
</style>

With invert on Hover:

<style>
a[href ^= "http"]:after {
     content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);    
}

a:hover[href ^= "http"]:after{
    -webkit-filter: invert(1);
  filter: invert(1);
}
</style>

Full Guide :

https://thecustomizewindows.com/2020/08/external-link-icon-with-hover-with-base64-data-uri-and-css/

Awesome! Any tips on how to change the icons color?

@esr360 I'm pretty sure you'd need a different base64 encoding for an image which is a different color, this isn't the same as a font where you can just change the color, it's more like using the URL for an image, I was just looking for the same thing!

@esr360 , @joshgrib hover is a dirty fix.