Trennlinie mit Text in der Mitte

von Moritur am 25. Juli 2012

Es gibt massenweise Snippets für Trennlinien mit CSS, aber ich habe keines gefunden das eine Trennline mit einem Text in der Mitte erzeugt. Gesagt getan, hier ist eins:

Das Html dazu sieht dann so aus:

In meinem Anwendungsfall sah das dann etwa so aus:

Erstellen Sie einen neuen Account

Oder

Bestellen Sie als Gast

Habt ihr vielleicht noch eine bessere Methode auf Lager, die ohne die festgelegte Hintergrundfarbe zurecht kommt?

5 Kommentare

Nicht die feine englische Art, aber so als Idee….

div {
text-align:center;
}

div:before {
content:’— — — — — — — — — — — — — ‚;
text-shadow: -7px 0 #000;
}

div:after {
content:‘ — — — — — — — — — — — — —‘;
text-shadow: 7px 0 #000;
}

Oder

by Mike on 8. Januar 2013 at 13:53. Antworten #

upps sieht man jetzt nicht… also nur

<div>Oder</div>

ohne die spans

by Mike on 8. Januar 2013 at 13:55. Antworten #

Hm an sich eine gute Idee.
Ich habs mal auf Codepen ausprobiert: http://codepen.io/anon/full/HtJEi
Allerdings sieht das bei mir (Chrome, Mac) etwas seltsam mit dem Text Shadow aus. Und es erweitert sich natürlich nicht auf die Maximalbreite. Aber das Problem mit der Hintergrundfarbe ist behoben.

by Moritur on 8. Januar 2013 at 14:03. Antworten #

Wie wäre es denn, statt dem content:‘—…‘ ein Hintergrundbild (1×1 Schwarz) in die Mitte zu setzen? Das würde sich dann anpassen in der Breite.

by jh0ker on 9. Januar 2013 at 13:49. Antworten #

Die before und after Elemente sind doch display: inline-block oder? Die passen sich doch dann garnicht an und hätten garkeine Breite mehr. Auch display: block; würde da aber nicht wirklich weiter helfen, weil sie ja dann beide auf die komplette Breite vom div aufziehen würden.
Oder übersehe ich da etwas?

by Moritur on 9. Januar 2013 at 13:56. Antworten #

Was meinst du dazu?

Pflichtfeld.

Pflichtfeld. Wird nicht veröffentlicht.

Wenn du eine hast.