JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<h2>Highlighting external links with CSS only</h2>

<a href="https://localhost/">Home</a>
<a href="https://localhost/about">About</a>
<a href="https://localhost/contact">Contact</a>
<a href="https://fsf.org">Free Software Foundation</a>
<a href="https://wordpress.org">WordPress</a>

<ul>
  <li><a href="https://localhost/">Home</a></li>
  <li><a href="https://localhost/about">About</a></li>
  <li><a href="https://localhost/contact">Contact</a></li>
  <li><a href="https://fsf.org">Free Software Foundation</a></li>
  <li><a href="https://wordpress.org">WordPress</a></li>
</ul>

CSS

a:not([href^="https://localhost/"]) {
  background-image: url('https://en.wikipedia.org/w/skins/Vector/resources/common/images/link-external-small-ltr-progressive.svg?2cd31');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 0.8em;
  padding-right: 0.9em;
  margin-right: 0.1em;
}