Automatisch Grafik an externe Links anfügen

Nicht nur aus Gründen der Barrierefreiheit im Internet ist es sinnvoll, externe Links entsprechend zu kennzeichnen. Dies kann beispielsweise mit einer Grafik geschehen. Um nun nicht jeden externen Link manuell mit einer Grafik versehen zu müssen, bietet CSS die Möglichkeit, dies zu automatisieren.

Wie das funktioniert, zeige ich dir anhand des folgenden Beispiels.

 

Externe Links automatisch kennzeichnen

 

Beispiel für das automatische Anfügen von Grafiken:

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

 

Möchtest du interne Links nicht beachten, musst du folgenden Zusatz mit angeben:

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

 

Erklärung:

Verwendest du dieses kurze CSS-Snippet, hängt es an alle Links automatisch eine Grafik. Möchtest du interne Links nicht beachten, ist die Angabe des zweiten Teils ebenfalls vonnöten. Ist alles korrekt eingebunden, erhalten nur noch externe Links eine Grafik.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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