CSS Tricks

How to indicate and visually distinguish certain external links

(thanks to Marc Laporte for the idea of Federation: colored links for sister wiki links)

The idea is we have e.g. lot of sub-sites for tiki.org like themes.tiki.org, dev.tiki.org, doc.tiki.org etc. and when we link to them we want to visually distinguish those links to users so they can easily see which link goes where even before they click and open the links or hover them.
So I () thought instead of introducing new code and preferences for links in Tiki base and parser it could be done easily using just CSS rules by matching only the links with href="http://sub.domain" or href="https://sub.domain".

The CSS code to match such links goes like this:

a[href^="http://sub.domain"],
a[href^="https://sub.domain"] {
	/* your rules here */
}

The code with ^=above says "for each anchor tag a check if the attribute href starts with http://sub.domain or https://sub.domain". So anything starting with that and behind the domain would match...

We could just change colors for the links by giving them main color of the site theme where we link to. E.g. for dev.tiki.org it could be

a[href^="http://dev.tiki"],
a[href^="https://dev.tiki"] {
	color: #c21e3b
}

But that would bring issues with readability on some background colors other than white. And doing it with background color instead on the links would make them too different and colorful which maybe would be too much, distracting and disturbing the flow of the text for a reader.
So why not to go a little bit more fancy and play with CSS pseudo-elements like ::before and ::after and create something more subtle but still visually distinguishing such links?

Here is an example (made in CodePen ) of what we want to achieve: Distinguish external links for selected URLs with fancy CSS using pseudo-elements

The actual code for tiki.org family sites as seen live in action can be explored here.