Meine Beiträge

JoomlaSoftwareNetzwerkWebsolution

Kennzeichnung externer Links - Kennzeichnung von externen Link mit Ausnahme

Externer Link soll keine Kennzeichnung erhalten

Für dieses Beispiel ist es erforderlich, dass man die vorherigen Abschnitte Kennzeichnung von Links mit Grafik bzw. Kennzeichnung von Links mit Schriftart verstanden hat. Wird die Webseite bereits mit CSS so ausgeführt, dass alle Links gekennzeichnet werden, dann hilft dieser Teil des Beitrags, wie man in bestimmten Fällen eine Kennzeichnung von Links unterbinden kann, denn es ist evtl. nicht gewünscht, dass neben einem Bild oder neben einer internen Verlinkung ein Kennzeichnung dargestellt wird.

Zusammenfassung mit der Kennzeichnung von Symbolen:

CODE: Kennzeichnung aller externen Links.

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

Ergebnis:

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

Möchtest du also eine externe Verlinkung ohne Kennzeichnung erhalten, musst du nichts anderes machen als eine weitere Klasse (.class) in deine 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 weist man dem 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 mit einen Content Managment System (CMS) arbeitest, dann kann man die Klasse im Link-Manager, wie hier in Joomla vornehmen.

Der Link-Manager in Joomla
Der Link-Manager in Joomla

Ergebnis:

Die nachfolgenden beiden Bilder haben das selbe externe Ziel.
Bild 1: mit Kennzeichnung.

HTML5- & CSS3-Video-Training <-Sieht nicht so toll aus!

Bild 2: ohne Kennzeichnung (sollte dennoch eine Kennzeichnung angezeigt werden, dann verwendest Du vermutlich keinen modernen Browser)

HTML5- & CSS3-Video-Training

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.