0 9727

CSS-Tutorial – per CSS einen Text doppelt unterstreichen

Heute möchte ich Ihnen zeigen, wie Sie per CSS einen Text doppelt unterstreichen können.

CSS hat hierzu keine eigene Methode. Zumindest bislang noch nicht.

Es gibt allerdings trotzdem eine Möglichkeit, einen Text per CSS doppelt zu unterstreichen. Wir setzen hierzu die Eigenschaft border ein.

Border verwendet man, um Rahmenlinien (beispielsweise bei einer Tabelle) zu zeichnen.

Mit border-bottom kann man per CSS festlegen, daß man NUR die untere Randlinie bearbeiten möchte.

Eine border Eigenschaft kann den Wert double haben. Der Wert double legt fest, daß eine doppelte Linie gezogen werden soll.

Den Text, den wir doppelt unterstreichen möchten, setzen wir in einen Span Container.

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   .double_underline {
                  border-bottom: double 3px #000000;
   }
  </style>
 </head>
 <body>
  Ich möchte <span class="double_underline">diesen Text doppelt unterstrichen haben</span>.
 </body>
</html>

Ich habe diese Lösung im aktuellen Firefox, Opera und Internet Explorer getestet. Es hat in allen drei Browsern einwandfrei funktioniert.

Hier könnt Ihr ein wenig live experimentieren:

See the Pen ogxRoo by Andreas Lang (@sphinxflash) on CodePen.

Wenn Ihr wissen möchtet, wie man einen Text einfach unterstreichen, überstreichen, durchstreichen oder blinkend darstellen kann, dann könnt Ihr über diesen Link auf das passende Tutorial kommen: CSS Text unterstreichen, durchstreichen, überstreichen, blinkend darstellen.

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.

Weiter