A Pure-CSS3 Solution On How To Inform Your Users They Are Going To Click On An External-Link Using Unicode-Emoji Icons

Posted at




icompile.eladkarako.com_external_links

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..)


a[href]:not([href*="eladkarako.com"]):after {
content: '';
position: relative;
color: rgba(0,0,0,.5);
font-size: 8pt;
font-weight: bolder;
vertical-align: super;
}


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.