Externe Links automatisch mit CSS kennzeichnen

Wer einen Blog betreibt oder sonst auf seiner Webseite viele externe Links verwendet, der möchte ausgehende Links, also Links zu anderen Webseiten, vielleicht gesondert kennzeichnen. So kann man den Nutzer im Vorfeld darüber informieren, dass er die aktuelle Seite verlassen wird.

Nun könnte man das, je nach verwendetem Content Management System z.B., durch eine gesonderte Klasse im Markup des Links machen, zum Beispiel so:

   <a href="https://www.externeseite.de" class="external">Link nach extern</a>

Mit entsprechendem CSS dazu könnten externe Links also eine andere Farbe oder ähnliches haben:

a.external {
  color: red;
}

Aber: Bei dieser Methode ist immer manuelle Arbeit nötig, um die Links, wie auch immer, als extern zu kennzeichnen.

Dank der erweiterten Attribut-Selektoren in CSS geht das Ganze aber auch automatisch bzw. mit etwas Einmalaufwand. Bei der Umsetzung die ich auch hier im Blog nutze, mache ich zudem Gebrauch von den sogenannten Pseudoklassen. Das sind “virtuelle Elemente” in dem Sinne, dass Sie nicht wirklich im Markup vorhanden aber trotzdem nutzbar sind.

Meine konkrete Umsetzung sieht so aus:

a[href*="//"]:not([href*="flomei.de"])::after {
  content: ' [↗]';
  position: relative;
  top: -.5em;
  font-size: .75em;
}

Zum Einsatz kommt hierbei zwei Mal ein Attribut-Selektor, der prüft ob in einem Attribut eine bestimte Zeichenkette vorhanden ist.

Damit werden zwei Dinge geprüft:

  1. Enthält das href-Attribut den Wert “//”, das passiert nur bei absoluten Links
  2. Enthält das href-Attribut NICHT den Wert “flomei.de”, damit werden absolute, aber interne, Links ausgeschlossen

Für Elemente bei denen das zutrifft, wird dann eine Regel auf die Pseudoklasse ::after angewendet, die deren Inhalt setzt, sowie das Pseudoelement entsprechend platziert. Man könnte das ::after aber auch weglassen und damit eine Formatierung auf das Linkelement an sich anwenden, ganz wie man mag.

Wichtig bei der Adaption für den eigenen Code ist natürlich, dass man die Domain entsprechend anpasst.

Teilen: Facebook - twitter - LinkedIn - XING - WhatsApp - E-Mail
RSS-Feed aller Blogbeiträge

Über den Autor

Ich bin gelernter Mediengestalter, studierter Druck- und Medientechniker und leidenschaftlicher Tüftler und Bastler.

Beruflich beschäftige ich mich mit der digitalen Transformation von Unternehmen, sowie der Automatisierung von Unternehmensprozessen, in der Druck- und Medienbranche. Mehr dazu findet sich im Lebenslauf.

Privat interessieren mich Kaffee(maschinen), Themen rund um Webentwicklung, das Internet im Allgemeinen und Speziellen und vieles, vieles mehr.

Ich freue mich auf Feedback per E-Mail unter kontakt@flomei.de, einen Euro für die Kaffeekasse oder etwas von meiner Amazon Wunschliste.