Kennzeichnung externer Links

[dkdenz]

Workaround zur Kennzeichnung externer Links

Es bürgert sich immer mehr ein, externe Links auch als solche zu kennzeichnen.
Damit man nicht immer hinter jeden Link ein Image einfügen muss, gibt es dieses Beispiel.
Es ist eigentlich sehr simpel.
Gearbeitet wird mit einer extra Klasse für die externen Links und zwei Hintergrundbildern.

a.extern:link { background:url(extern.gif) no-repeat center right; }
a.extern:visited { background:url(extern.gif) no-repeat center right; }
a.extern:hover { background:url(extern_hover.gif) no-repeat center right; }
a.extern:active { background:url(extern.gif) no-repeat center right; }

Eines für den Normalzustand des Links und eines für den Hovereffekt .
Wichtig ist noch, dass man hinter jedem Link zwei geschützte Leerzeichen einfügt.

<a class="extern" href="http://dkmd.de/">Externer Link&nbsp;&nbsp;</a>

Beispiellink: http://dkmd.de/tests/externer_link/

[womstar]

Erst man danke fürs Tut.
Trotzdem hab ich noch eine kleine anmerkung.
Statt der Leerzeichen würde ich ein padding-right:10px nehmen.

Grüße Robert

[dkdenz]

Noch besser...hab' ich nicht dran gedacht...

[Grinsemann]

Besser wäre es noch mit dem Attribut-Selekotr zu arbeiten. Allerdings beherrschen manche Browser diese Gewandheit noch nicht.

a[href^="http://"] {
	…
}

Um nun auch die eigene Domain auzuschließen, wäre eine Kombination mit dem CSS3-„Negation“-Selektor nötig:

a[href^="http://"]:not([href*="example.net"]) {
	…
}