Externe Links mit Symbol kennzeichnen

Immer wieder sieht man auf diversen Webseiten, dass dort externe Links (also Verlinkungen zu externen Quellen) mit einem Symbol gekennzeichnet sind. Dies könnte wie folgt aussehen

Ihr seht neben dem Link zu AntiSpam Bee also dieses doch recht nette Rechteck mit integriertem Pfeil. Dies soll Eurem Leser symbolisieren:”He Du, dieser Link führt von dieser Webseite weg!” und wir wollen ja unsere Leser gerne so lange als möglich bei uns haben. Trotzdem finde ich dies eine sehr schicke Lösung und darum möchte ich Euch in diesem Tutorial, eigentlich mehr ein Quicktipp, kurz zeigen wie Ihr das mittels CSS (Cascading StyleSheet) umsetzt.

Wie wir wissen sollten beginnt ein Hyperlink immer mit <a href=…..; dies sagt uns klar welches Objekt wir ansteuern müssen. In diesem Falle also a. Der Code der nun in Eure *.css Datei muss lautet:

a[href^='http://']
{
padding-right: 16px;
background: url(images/external.png) right no-repeat;
}

Der Pfad des Hintergrundbildes muss dem Eurer Struktur auf dem Webserver gleichen bzw. einfacher gesagt: der Pfad muss dort hin zeigen wo das zu verwendende Bild liegt.

Und damit hätten wir das Problem auch schon gelöst wenn wir nicht zu 99,9% mit absoluten Pfaden arbeiten würden! Was heißt das? Im Klartext würde nun jede Verlinkung die mit <a href= unser Symbol zugeordnet werden. Wollen wir das? Nein! Also müssen wir eine Ausnahme dafür erstellen. Diese sieht so aus

a[href^='http://eure-domain.com'],
a[href^='http://www.eure-domain.com']
{
padding-right: 0px;
background: none;
}

Ihr könnt aber eine der Abfragen auslassen wenn Eure Webseite zB nur mit oder ohne www zu erreichen ist. Und das war auch schon der ganze Hexenzauber! Have Fun :)

Kleines Update

Solltet Ihr mit target=”_blank” Eure Links versehen, so genügt es schon diesen Code einzufügen (hilft Euch auch um andere gestylte Links zu schützen bzw der Optik nicht zu zerstören)

a[target="_blank"]
{
padding-right: 16px;
background: url(images/external.png) right no-repeat;
}