Automatisch Grafik an externe Links anfügen

Du kannst mit CSS automatisch eine Grafik an externe Links anfügen. Somit kannst du ganz einfach bspw. externe Links kennzeichnen, ohne dies bei jedem Link manuell machen zu müssen.

Wie das funktioniert, zeige ich dir dabei anhand des nachfolgenden Code Snippets.

 

Mit CSS eine Grafik an externe Links anfügen

Um automatisch eine Grafik an externe Links anzufügen, kannst du dazu einfach die nachstehenden Snippets benutzen.

 

Beispiel:

a[href^="http:"] {
 background: transparent
 url('externer_link.jpg') 100% 50% no-repeat;
 padding-right: 10px;
 }

 

Möchtest du interne Links nicht beachten, musst du zudem das folgende Snippet mit angeben.

 

Beispiel:

a[href^="https://webmasterparadies.de"]
 {
 background: transparent;
 padding-right: 0px;
 }

 

Erklärung:

Das erste Snippet gibt dir dabei bereits alles, was du brauchst. Baust du es in dein Stylesheet ein, zeigt der Browser danach neben allen Links die Grafik externer_link.jpg an. Davon betroffen sind jedoch auch die internen Links auf deiner Website.

Damit diese keine Grafik erhalten, muss das zweite Snippet ebenfalls ins Stylesheet eingefügt werden. Die im Beispiel genannte URL änderst du entsprechend auf deine eigene URL ab. Hast du alles korrekt angelegt, erhalten danach nur noch die externen Links eine Grafik.

 

Fazit

Es ist im Grunde genommen gar nicht schwierig, eine Grafik an externe Links anzufügen. Mit CSS kannst du das ganze zudem automatisch machen lassen. Auf ähnliche Art und Weise kannst du bspw. auch E-Mail- oder Download-Links mit CSS visualisieren.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.