I had a nice experiment before, that mimics the icons Wikipedia uses (both Hebrew [RTL] and English [LTR] versions) it even used a base64 of semi-transparent PNG to make it super-compatible with most browsers out there, minimal CSS rules required.
This time avoiding the need to use an embedded image, I've generated a website called umoji.eladkarako.com (and its GitHub project) that contain a simple one box with all (most) of Unicode-emojis out-there, making it easy to include them in project (or StackOverflow answers 👌) by a simple Copy&&Paste,
This made to following code super easy to style,
essentially YOU are placing an "icon" right after the link (using the ':after' syntax-selector),
the icon is an upward arrow, placed vertically at super-script position,
- not using top or padding or margin to place elements, but native values- is the best practice, naturally..
The entire solution is pure CSS implementation, it uses the 'href' attribute of <a> elements querying about its content, specifically asking only <a> elements that has no content with the string 'eladkarako.com' in it,
naturally there are some links that would considered "not external" for example:
http://example.com?param1=eladkarako.com but in-order to keep the solution simple, this scenario is "absorbable" (meaning we can absorb or "ignore" the few cases..)
this may be combined with other similar rules such as "download" links, internal links, links to specific sections, log-out links, registration links etc...
you can even modify the cursor while hovering them, to the same image,
but in this case you would either have to create a SVG image (using that unicode-emoji) or copy-paste to an image-editor program such as Paint.net, remove white background, save as png, convert to base64 (optionally) before making the image usable..
too long? meh.