Externe Links mit CSS kennzeichnen

Externe Links zu kennzeichnen gilt als benutzerfreundlich. Der Besucher soll wissen, wenn ein Link von der aktuellen Webseite wegführt.

Natürlich wäre es viel zu aufwendig, jeden einzelnen externen Link von Hand zu markieren. Hier möchte ich eine Lösung präsentieren, die nur mit CSS arbeitet:

Der Selektor prüft, ob der Link mit “http://” beginnt. Natürlich können auch interne Links mit “http://” beginnen, weshalb ich in einem zweiten Schritt prüfe, ob der Link die aktuelle Domain (in meinem Falle “canals.ch”) enthält.

Der Selektor kann auch mit jQuery verwendet werden um beispielsweise alle externen Links automatisch in einem neuen Tab zu öffnen.

 

Beispiel

Interner Link

Externer Link