Icons für externe Links per CSS

Es ist üblich, Lins, die zu externen Seiten verweisen, mit einem Symbol zu kennzeichnen. Händisch ist das nicht durchhaltbar, denn so etwas geht beim Schreiben eines Artikels schnell vergessen. Zum Glück bietet CSS zwei einfache Wege zur Automatisierung.

1. Nutzung von target=_blank

Die erste Möglichkeit bedient sich der Tatsache, dass externe Links im Normalfall in neuen Fenstern geöffnet werden. Sofern externe Links durch ein target=_blank ergänz sind, kann dies in CSS als Selector genutzt werden. Das schaut dann so aus:

<!DOCTYPE html>
 <html lang="de">
  <head>
    <title>Example</title>
    <meta charset="utf-8" />
    <style>
      a[target="_blank"]:after { content: url(./image/external.png); }
    </style>
  </head>
  <body>
    <p><a href="./">Ich bin ein interner Link.</a><br>
       <a href="https://www.google.de/" target="_blank">Ich bin ein externer Link.</a></p>
  </body>
</html>

In diesem einfachen Codebeispiel sorgt eine Zeile CSS-Code dafür, dass hinter jedem Link, der in einem eigenen Fenster geöffnet werden soll, die Bilddatei ./image/external.png angezeigt wird.

2. Domain-basierter CSS-Selector

Nun mag man zu Recht behaupten, dass das händische Hinzufügen von target=_blank genauso schnell vergessen werden kann, wie das händische Einfügen eines Bildes. Außerdem gab es bereits in mehreren HTML-Standards Versuche, das vielerorts verhasste Attribut target aus dem HTML-Standard zu verbannen.

Aber keine Sorge, es geht auch ganz ohne dieses Attribut, denn CSS kann auch den Domainnamen im Attribut href auswerten:

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Example</title>
    <meta charset="utf-8" />
    <style>
      a:not([href*='heikorichter.name']):not([href^='#']):not([href^='/']):after { content: url(./image/external.png); } 
    </style>
  </head>
  <body>
    <p><a href="./">Ich bin ein interner Link.</a><br>
       <a href="https://www.google.de/">Ich bin ein externer Link.</a></p>
  </body>
</html>

Der Code in diesem Beispiel fügt fast schon wie mit Magie das Bild hinter jeden Link ein, der nicht auf die eigene Domain (hier: heikorichter.name) verweist. Er erkennt sogar relative Links und spart diese aus. Alles mit einer einzigen Zeile CSS-Code.

3. Link-Symbol ohne Grafik

Und es geht sogar noch besser. Wer bereit ist, Web-Fonts einzusetzen (wer mach das heutzutage nicht?), der benötigt sogar noch nicht einmal eine Grafikdatei. Hier ist die dritte, aus meiner Sicht optimale Lösung mit dem Web-Font FontAwsome. Für die Nutzung von FontAwsome ist ein kostenloses Benutzerkonto erforderlich, daher muss das Verlinkte Javascript (hier 123456789.js) persönlich angepasst werden.

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Example</title>
    <meta charset="utf-8" />
    <script src="https://kit.fontawesome.com/123456789.js" crossorigin="anonymous"></script>
    <style>
      a:not([href*='heikorichter.name']):not([href^='#']):not([href^='/']):after {
         font-family: 'FontAwesome';
         content: " \f08e";
       }
    </style>
  </head>
  <body>
    <p><a href="./">Ich bin ein interner Link.</a><br>
       <a href="https://www.google.de/">Ich bin ein externer Link.</a></p>
  </body>
</html>

Aufrufe: 117

Comments

Leave a Comment