Dreifache Trennlinien mit CSS

von Fries Websolutions

Nur eine einzige Trennlinie mit HTML zu erzeugen, das ist ganz einfach. Doch wer eine dreifache Trennlinie hier bevorzugt, die dann auch noch in jedem Browser bunt dargestellt werden soll, muss mit einer Grafik zufrieden sein.

Doch mit CSS geht das schneller und auch leichter, doch unsere dreifache Linie benötigt erst einmal folgenden HTML-Code:

<pre class="tripleline"> </pre>

Doch zwischen <pre>...</pre> können beliebig viele Leerzeichen stehen, da das ganze vorformatiert ausgegeben wird, also mit allen Leerzeichen. Alternativ kann die Entität &nbsp; verwendet werden. In jedem Fall ist die Anzahl der Leerzeichen oder Entitäten gleich der Länge der späteren Linie.

Jetzt f ehlt nur noch das Stylesheet:

pre.tripleline {
text-decoration: underline overline line-through;
color: #FF0000; }

Denn es bewirkt, dass unsere Leerzeichen, unterstrichen: underline, überstrichen: overline und durchgestrichen: line-through, werden. Dann legen wir noch die gewünschte Farbe fest. Doch das Ergebnis zeigt, nur drei dünne und untereinander liegenden Linien.

Diese Trennlinien sind nicht unbedingt geeignet, um komplette Textabschnitte zu gliedern, doch sie können aber, zum Beispiel, als originelle Verzierung für große Überschriften sein.