In diesem Beitrag geht es darum, wie man einen externen Link so kennzeichnet, damit der Besucher erkennt, dass dieser "Link" zu einem externen Ziel führt. Um dies umzusetzen hat man 2 Möglichkeiten.

1. Möglichkeit: Kennzeichnung mit einer kleinen Grafik nach dem Link. Wird aber eher nicht mehr so bevorzugt, da es durch den heutigen Webentwicklungsfortschritt längst überarbeitet wurde.
2. Möglichkeit: Kennzeichnung durch ein Icon die auf eine Art Schriftart eingebunden wird. Dies ist der heutige Standard und wird im unteren Teilbereich von diesem Beitrag vorgestellt.

Selbstverständlich kann man die nachfolgenden Beispiele auch mit einer if-Abrage mit Java, JaveSkript oder mit PHP usw. sehr geschickt lösen. Hier aber nicht das Ziel.

Kennzeichnung von Links mit Grafik

Möchte man einen Link mit einem kleinen Icon kennzeichnen, benötigt man dazu ein kleines Bild.png mit einer Größe von 10px x 10px.
Dieses Icon kannst du in jeden beliebigen Bildbearbeitungsprogramm erstellen. In diesem Beispiel nenne ich das kleine Icon "externlink" und speichere es mit dem Datenformat ".png" ab, da dieses Datenformat auch transparanzen unterstützt.

Das erstellte Icon speicherst du anschließend in den Image-Ordner ab, wo sich auch die anderen Bilder des Templates befinden.
Anschließend wird folgender Code in die CSS-Datei geschrieben.

CODE: Grundversion

a[href^='http://'],
a[href^='https://'],a[href^='ftp://']
{
 padding-right: 12px;
 background: url(../images/externlink.png) right no-repeat;
}

In der ersten Zeile wird überprüft, ob das Attribut 'href' den Wert http:// , https:// oder ftp:// besitzt. Ist das der Fall wird logischer Weise die Aktion ausgeführt. Als Eigenschaft verwendest du "padding-right" mit dem Wert 12px, damit das eingebundene Bildchen einen Abstand von 12px zum Link einnimmt.
Mit der darauffolgenden Eigenschaft "background" und den Werten "url(../images/externlink.png)", "right" und "no-repeat" wird die Grafik ohne Wiederholung rechts vom Link dargestellt.

Jetzt solltest du noch einen weiteren Punkt berücksichtigen. Da man auch mit dem Wert http:// , https:// oder ftp:// auf die eigene interne Seite verweisen kann, würde die Link-Kennzeichnung auch hier greifen. Da hier eine Kennzeichnung nicht nötig ist, kannst du den CSS-Code verfeinern und dazu den :not-Sector nutzen.

CODE: Verbesserte-Version

a[href^='http://']:not( 
 [href^='http://www.norbert-kreidt.de/']):not( 
 [href^='http://norbert-kreidt.de/']),
a[href^='https://']:not( 
 [href^='https://www.norbert-kreidt.de/']):not( 
 [href^='https://norbert-kreidt.de/'])
{
 padding-right: 12px;
 background: url(../images/externlink.png) right no-repeat;
}

Das war es dann schon. Falls kein Bild als Icon gewünscht ist, gibt es eine weitere Möglichkeit, wie man das mit bereits vordefinierten Icons bewerkstelligen kann und von verschiedenen Anbietern im Internet angeboten werden. Dazu aber mehr im darauffolgenden Beitrag.