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.
Dann erfolgt die Selektion nocheinmal mit https://. Localhost braucht hier nicht ausgeschlossen zu werden, denn der lokale Hugo-Server läuft nur über http. Durch :after kann mit content: ein Inhalt nach den selektierten Links eingefügt werden, hier eine kleine Grafik, welche anschließend noch ein wenig nach oben versetzt wird. Einfach, oder?
Das Ergebnis kann man gleich hier sehen, denn eine ähnliche Idee hatte schon jemand auf stack overflow. Die kleine Grafik stammt ebenfalls von dort.