Kategorien
Design HTML/CSS

Anmerkungen zur Unterstreichung

Textpassagen oder Worte mit Hilfe einer Unterstreichung hervorzuheben ist eine selbstverständliche Sache. Aber nicht im Web. Hier ist die Unterstreichung verpönt, denn man kann sie leicht mit einem Hyperlink verwechseln. Der Besucher wird unweigerlich klicken…

Textpassagen oder Worte mit Hilfe einer Unterstreichung hervorzuheben ist eine selbstverständliche Sache. Aber nicht im Web.

Hier ist die Unterstreichung verpönt, denn man kann sie leicht mit einem Hyperlink verwechseln. Der Besucher wird unweigerlich klicken und aller Wahrscheinlichkeit nach enttäuscht sein, weil nichts passiert.

Sie können die Unterstreichung trotzdem verwenden. Mit CSS. Sie muss nur etwas dicker als gewöhnlich ausfallen, die Farbe lässt sich ebenfalls variieren. Damit wird die Verwechslungsgefahr beseitigt.

Zwei Beispiele

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Der Quellcode

 <span
style="border-bottom : 2px solid black">nonummy</span>
      <span
style="border-bottom : 2px solid red">wisi enim</span>

Mehr als 2 Pixel wirkt übertrieben, die Wirkung ist jedoch abhängig vom gewählten Durchschuss (line-height). Üblicher Hinweis: alte Browser können das nicht, ein entscheidender Verlust ist das aber in diesem Fall nicht.

Von Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…

Schreibe einen Kommentar

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