Marking external links

Up until Adding Wiki Links to 11ty the majority of links on this website where external. With increasing usage of Wiki Links however, it soon became obvious that I needed a way to differentiate between internal and external linking, thus issue #174: Make external links easier to identify was opened.

Keeping with the theme of Wiki, I checked out how Wikipedia marks external links:

a.external {
    background-image: url(images/link-external-small-ltr-progressive.svg);
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 0.857em;
    padding-right: 1em;
}

The css is pretty basic, this is because Wikipedia attaches a .external class to all links it knows are external during the backend page render. I could write a 11ty transformer to do the same but that's not an insignificant amount of work and I know the CSS attribute selector exists and is fairly well-supported^[1].

I rarely make use of CSS's attribute selector, after all - at heart I am a backend developer - so I had a quick search for a solution that I could lazily copy and paste^[2]. I quickly found David Walsh's 2014 post showing how to style external links with CSS which I initially skim-read before heading to the comments and finding what I was looking for in Richard van Naamen's example:

a[href^="http://"]:not([href*="mydomain.com"]):before{ 
    content: " ";
    width: 16px;
    height: 16px;
    background: no-repeat url('images/link.gif'); 
    padding-right: 1.2em;
}

In hindsight (I'm writing this several days after this deployed,) combining David's selector example with the CSS body of Wikipedia would have completed the required functionality and closed the issue. However, that is not what I did.

Richard's solution worked, but I wanted to exclude hash links and any href that began with a forward slash (if only I hadn't skim-read Davids post!) The next link down was to a Stack Overflow question, wherein Shaz's 2021 solution for styling all external links gave me exactly what I was looking for: a copy-paste job!

a[href]:not(:where(
  /* exclude hash only links */
  [href^="#"],
  /* exclude relative but not double slash only links */
  [href^="/"]:not([href^="//"]),
  /* domains to exclude */
  [href*="//stackoverflow.com"],
  /* subdomains to exclude */
  [href*="//meta.stackoverflow.com"]
)):after {
  content: '↗️';
}

Ironically, had I fully read David's post I could have found this Stack Overflow answer quicker because David had actually linked to it. When his post was published it would have been to an older version of the answer which has since been updated but still, I would have obtained a solution faster.