Hallo Robert,
a.extern:before { content: url(../bilder/ZielKreuz.png); }
Die derzeit gängige Methode, auch in Alt-Browsern funktionierende Link-Icons mittels CSS zu realisieren sieht meines Wissens nach so aus:
a.extern {
padding-left:20px;
background-image:url(../bilder/ZielKreuz.png);
background-repeat:no-repeat;
}
Screenreader und Textbrowser sollten (hoffentlich) statt des Symbols eher mit dem title was anfangen können.
Ein kurzer Test mit links und lynx ergibt, dass keiner der beiden in den Default-Einstellungen den Inhalt des title-Attributes anzeigt; auch in den Optionen habe ich keine Option dazu gefunden. Wenn tatsächlich jedes Zugangsgerät die Information „Externer Link“ bekommen sollte, dann würde ich eher die Einbindung in HTML als Bild wählen:
<img src="..bilder/Zielkreuz.png" width="15px" height=" alt="Externer Link:" title="Externer Link" longdesc="/impressum/"> <a href="...">Klick mich!</a>
Durch den Alternativtext ist dann auch ein entsprechendes Textquivalent sicher gestellt.
Nebenbei bemerkt:
• Ich weiss nicht, ob Dein Impressum wirklich juristisch wasserdicht ist, aber in dem Zusammenhang ist es eventuell sinnvoll. Ich selber würde es aber nicht machen, weil:
• Ich persönlich mag Icons mitten im Text nicht – ein steter Quell der persönlichen Ärgernis hier bei SELFHTML. Ich werde da immer aus dem Lesefluss herausgerissen.
• Als wirklich sichtbar empfinde ich Dein Icon auch nicht; der schwarze Hintergrund tut da sein übriges. Auch entgeht mir irgendwie die Metapher „Fadenkreuz“ → „Externer Link“. Eventuell möchtest Du ein anderes Icon nehmen.
Tim