Previously I discussed a way of hinting to the user that a link would open in a new tab/window by simply using css to append an icon to the link text if the target="_blank" attribute was present. This is all very well, but fails to distinguish between external (off-site) links and links to a new page on the current site. 

This can also be done using CSS by looking at the href value and detecting if it starts with https://  The aim is to end up with three different hints. Links to internal pages in the same window will use the plain <a > css. Links to external sites using the same window will use an arrow pointing up and left. Links to internal pages using a new tab/window will use an arrow inside a box, and finally links to external pages using a new tab/window will use an arrow pointing out of the box.

However there are a number of refinements to needed to achieve this:

Firstly you need to detect both https:// and http:// as not all sites use secure links.

Secondly you need to exclude links to the current domain using the :not() css selector

Thirdly you may need to detect both www.mydomain/ and plain mydomain/ versions of links to the current site.

Here it is working:

Link hinting tests

• internal link to same window/tab using http:
• internal link to same window/tab using https:
• internal link to new window/tab using http:
• internal link to new window/tab using https:
• internal link to same window/tab using http://www.
• internal link to same window/tab using https://www.
• internal link to new window/tab using http://www.
• internal link to new window/tab using https://www.
• off-site link to same window/tab using http:
• off-site link to same window/tab using https:
• off-site link to new window/tab using http:
• off-site link to new window/tab using https:
• off-site link to same window/tab using http://www.
• off-site link to same window/tab using https://www.
• off-site link to new window/tab using http://www.
• off-site link to new window/tab using https://www.

And here is the CSS code to achieve it.

/* CSS for hinting link destinations. *?
/* internal link using same window/tab = no special hint */

/* offsite link using same window/tab = plain arrow */
a[href^="https"]:not([href^="https://www.blog.crosborne"]):not([href^="https://blog.crosborne"]):after,
a[href^="http://"]:not([href^="http://www.blog.crosborne"]):not([href^="http://blog.crosborne"]):after{
  content:" \2197";
}
/* offsite link using new window/tab = box arrow out */
a[href^="https://"][target="_blank"]:not([href^="https://www.blog.crosborne"]):not([href^="https://blog.crosborne"]):after,
a[href^="http://"][target="_blank"]:not([href^="http://www.blog.crosborne"]):not([href^="http://blog.crosborne"]):after {
	font-family: "IcoMoon"; 
	content: " \e024";
}
/* internal link using new window/tab = box arrow inside */
a[target="_blank"]:after {
	font-family: "IcoMoon"; 
	content: " \e251";
}

Obviously replace blog.crosborne with the actual host hame. In Joomla 3 you can use the supplied IcoMoon font for the boxes with arrows, for Joomla 4 you need to use the FontAwesome equivalents (and the relevant version number when referencing the font. If you are not using Joomla you'll need to find some suitable commonly available Unicode icon characters, or save a suitable image of the icon you want and reference that in the css :after content.