CSS

Automatisch Grafik an externe Links anfügen

Details

Veröffentlicht am Sonntag, 23. November 2008 15:04

Geschrieben von Jan Pionzewski

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, gibt es praktischerweise mit CSS die Möglichkeit, dies zu automatisieren.

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;
}
 

 
Zusatz, wenn interne Links nicht beachtet werden sollen:

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

Erklärung:
Mit diesem kurzen CSS-Trick wird automatisch an allen Links eine Grafik angehängt. Damit bei internen URLs diese Grafik nicht mit angefügt wird, ist die Angabe des zweiten Teils auch vonnöten. Fortan werden nur noch externe Links mit einer Grafik gekennzeichnet.