In diesem Tutorial möchte ich dir zeigen wie man Hyperlinks die auf eine andere Homepage verweisen mit CSS kennzeichnen kann.
Anschließend zeige ich dir noch eine optione Möglichkeit wie man dennoch einzelne externe Link-Kennzeichnungen wieder unterdrücken kann, denn bei Bilderlinks kann es in den seltenen Fällen nicht gerade schick aussehen.

Kennzeichnung 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 kleinen 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. Damit diese Links eben keine Kennzeichnung erhalten, kannst du den kleinen 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;
}

So das war alles. Falls du keinen Icon selber erstellen möchtest, gibt es noch eine weitere Möglichkeit, wie man das mit bereits vordefinierten Icons bewerkstelligen kann. Dazu mehr im darauffolgenden Abschnitt "Kennzeichnen mit Schriftart IcoMoon".


Kennzeichnen mit Schriftart "IcoMoon"

Eine weitere Möglichkeit Links zu kennzeichnen ist mit Schriftzeichen. Hierfür gibt es auf der Seite https://icomoon.io genauere Informationen, wie man Icon Fonts in seiner Homepage einbindet.

a[href^="http://"]:after,
a[href^="https://"]:after,
a[href^="ftp://"]:after 
{   
 font-family: icoMoon;   
 content: " ""\26";
}

Verweise auf die eigene Seite sollen keine Kennzeichnung erhalten. Wie man dies anhand eines CSS-Tips bewerkstelligt, kannst du im folgenden Codebeispiel sehen.

a[href^="http://www.norbert-kreidt.de"]:after,
a[href^="http://norbert-kreidt.de/"]:after,
a[href^="https://www.norbert-kreidt.de"]:after,
a[href^="https://norbert-kreidt.de/"]:after
{
 content: none;
}

Ergebnis:

1. Die folgende Links verweisen extern auf die eigene Seite (ohne Kennzeichnung):
http://www.norbert-kreidt.de oder auf https://norbert-kreidt.de

2. Die folgende Links verweisen extern auf eine andere Seite (mit Kennzeichnung):
https://www.google.de oder auf https://google.de


Externer Link soll keine Kennzeichnung erhalten

Für dieses Beispiel ist es erforderlich, dass du den Abschnitt "Kennzeichnung mit Grafik" und "Kennzeichnung mit Schriftart IcoMoon" verstanden hast.

Wird die Webseite bereits mit CSS so ausgeführt, dass alle externen Links gekennzeichnet werden, dann hilft bestimmt das folgende Tutorial, wie man trotzdem eine Kennzeichnung eines externen Links unterbinden kann. Denn es ist vielleicht nicht sehr schön, dass neben einem Bild ein Icon dargestellt wird.

Kurze Zusammenfassung mit der Kennzeichnung von Symbolen (IcoMoon):

1/2

CODE: Kennzeichnung aller externen Links.

a[href^="http://"]:after,
a[href^="https://"]:after,
a[href^="ftp://"]:after 
{
 font-family: icoMoon;
 content: " ""\26";
}

Ergebnis:

Die folgende Links verweisen extern auf eine andere Seite (mit Kennzeichnung):
https://www.google.de oder auf https://google.de

 2/2

Möchtest du also eine externe Verlinkung ohne Kennzeichnung erhalten, musst du nichts anderes machen als eine weitere Klasse (.class) in seiner CSS-Datei schreiben.
Ich nenne die CSS-Klasse einfach mal ".ohneKennzeichnung".

CODE: Ohne Kennzeichnung eines externen Links (wenn der obrige CODE: "Kennzeichnung aller externen Links" bereits eingesetzt wird)

a.ohneKennzeichnung[href^="http://"]::after,
a.ohneKennzeichnung[href^="https://"]::after,
a.ohneKennzeichnung[href^="ftp://"]::after 
{
 content: none;
}

Anschließend ordnet man den externen Link die Klasse (.ohneKennzeichnung) zu. Dies sieht wie folgt aus:

<a class="ohneKennzeichnung" target="_blank" href="https://www.google.de"><img alt="Beispielbild" src="/Dein-Pfad-Deines-Bildes.jpg"></a>


Wenn du wie ich in einen Content Managment System (CMS) arbeitest, dann kann man zu 100% die Klasse in einen Link-Manager (hier Joomla) zuordnen.

Der Link-Manager in Joomla


Ergebnis:

Die nachfolgenden beiden Bilder verweisen extern auf die selbe Adresse.
Bild 1: mit Kennzeichnung
Bild 2: ohne Kennzeichnung (sollte dennoch eine Kennzeichnung angezeigt werden, wird es von den jeweilige Browser nicht unterstützt)

HTML5- & CSS3-Video-Training

HTML5- & CSS3-Video-Training

Bewertung: 5 / 5

Stern aktivStern aktivStern aktivStern aktivStern aktiv