Kategorien
Design HTML/CSS

Doppelt hält besser

Hyperlinks sind entweder unterstrichen oder sie sind es nicht. Warum nicht einmal die doppelte Unterstreichung probieren? Das fällt mehr auf, und technisch ist das ganz einfach. A:link { color: black; text-decoration : underline; border-bottom : 1px solid…

Hyperlinks sind entweder unterstrichen oder sie sind es nicht. Warum nicht einmal die doppelte Unterstreichung probieren? Das fällt mehr auf, und technisch ist das ganz einfach.

 A:link {
    color: black;
    text-decoration : underline;
    border-bottom : 1px solid black; }

Das genügt auch schon. Die zusätzliche Unterstreichung mit border-bottom sorgt für das ungewöhnliche Doppel.

Screenshot

Doppelte Unterstreichung

Wer mag, kann natürlich auch zwei verschiedene Farben einsetzen.

      A:link {
    color: black;
    text-decoration : underline;
    border-bottom : 1px solid green; }

Screenshot

Doppelte Unterstreichung zweifarbig

Ein Hover-Effekt, bei dem die Unterstreichung verschwindet, ist trotzdem möglich:

      A:hover {
    color: #cc3333;
    text-decoration : none;
    border-bottom : 0px solid black; }

Alte Browser zeigen den Effekt nicht, sie bleiben bei der herkömmlichen Darstellungsweise.

Dieser Effekt wird inzwischen eingesetzt, um damit Werbelinks in Fließtexten unterzubringen. So unterschiedet man Werbelinks von normalen Hyperlinks. Mehr darüber im Artikel: Die Farbe des Geldes: Werbung im Fließtext.

+
Werbung als Hyperlink mit doppelter Unterstreichung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.