Um externe Links automatisch mit CSS zu kennzeichnen müssen zuerst mit einem passenden CSS-Selektor alle externen Links ausgewählt werden. Anschließend können Darstellungseigenschaften für die ausgewählten Links festgelegt werden. Mit folgendem Code werden z.B. hier im Blog alle ausgehenden Links mit einer kleinen Grafik versehen.
article a[href^="http://"]:not([href*="blog.tausys.de"]):not([href*="localhost"]):after,
article a[href^="https://"]:not([href*="blog.tausys.de"]):after {
content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
position: relative;
top: -.3em;
}Alle Artikel hier im Blog stehen innerhalb von <article> ... </article>. In diesen Artikeln werden alle Links (a) selektiert, welche mit http:// beginnen und nicht auf die Blog-Webseite (blog.tausys.de) zeigen. Der Link darf auch nicht auf localhost zeigen, da ich Artikel-Entwürfe mit hugo darüber anzeigen lasse.