Kategorien
Design HTML/CSS

Doppelte Unterstreichung in Variation

Weder HTML noch CSS kennen die direkte doppelte Unterstreichung. Einen Befehl dafür gibt es jedenfalls nicht. Mit Umwegen kommen wir dennoch ans Ziel. style=“border-bottom : double“ wäre eine der Möglichkeiten. Das klappt erstaunlicherweise auch in Farbe,…

Weder HTML noch CSS kennen die direkte doppelte Unterstreichung. Einen Befehl dafür gibt es jedenfalls nicht. Mit Umwegen kommen wir dennoch ans Ziel.

style=“border-bottom : double

wäre eine der Möglichkeiten.

Das klappt erstaunlicherweise auch in Farbe, indem man den Farbnamen, resp. die entsprechende Codierung dahintersetzt.

style=“border-bottom : double red

Nicht übel, doch noch nicht ganz im Sinne unsere Artikels. Doppelt hält auch bei Unterstreichungen besser. Wer mehr möchte, muss mehr Befehle einsetzen:

style=“text-decoration : text-decoration : underline; border-bottom : 1px solid red“

Damit sorgen wir für eine gewöhnliche Unterstreichung in der Farbe des Textes. Dazu kommt die untere Rahmenlinie (border-bottom), die wir auch in anderen Farben darstellen können, ohne das der eigentliche Text davon berührt wird.

Die dynamische Variante:

Ein Link, der nicht nur bei Mausberührung seine Farbe wechselt (Hover) sondern dessen Unterstreichung ebenfalls eine Variation, nämlich eine Verdoppelung erfährt.

 <style type="text/css">

 <!-- 
 a:visited{TEXT-DECORATION: underline; color : black;} 
 a:hover
{TEXT-DECORATION: underline; color : blue; border-bottom : 1px solid red; } 
      //-->

 </style>

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.