Wie geht das?

Die Linie hinter dem Text in diesem Beispiel ist gemeint.

Das hab ich mich auch schon einige Male gefragt. Und zu meiner Verwunderung gibt es schon viele gute Ansätze zu dem Thema, wie man eine Linie vertikal hinter einem Text zentriert und dabei noch Abstand zum Text halten kann. Nachfolgend will ich euch eine Variante vorstellen, die auch auf kunterbuntem Hintergrund funktioniert.

Wie immer brauchen wir zu Beginn eine HTML-Grundlage, mit der wir arbeiten können. Dazu reicht uns ein Container und eine Überschrift, in diesem Fall soll das mal eine <h3> sein.

HTML

1
2
3

<section>
	<h3>Lorem Ipsum</h3>
</section>

Zuerst bekommen der Container und die H3 selbst einige CSS Anweisungen.

CSS

1
2
3
4
5
6
7
8

section {
	overflow: hidden;
	text-align: center;
}
h3 {
	display: inline-block;
	position: relative;
}

position: relative sorgt dafür, dass wir später die Linien relativ zur Überschrift ausrichten können. Damit die Überschrift mittig dargestellt wird, braucht es die Zentrierung über text-align. Overflow verhindert, dass die Linien über den Container hinaus weitergezeichnet werden.

Der Hintergrund ist nur Beispielhaft.

So weit, so gut! Jetzt geht es darum die Linien zu erstellen. Da wir dafür keine weitere HTML-Tags hinzufügen wollen, nehmen wir die CSS-Pseudo-Elemente ::before und ::after.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

h3::before,
h3::after {
	content: "";
	position: absolute;
	border-top: 1px solid #666;
	top: 50%;
	width: 2000px;
}
h3::before {
	margin-right: 15px;
	right: 100%;
}
h3::after {
	margin-left: 15px;
	left: 100%;
}

Mit diesen CSS-Anweisungen werden die Linien auf einen Pixel Dicke und einer sehr großen Länge von 2000 Pixeln festgelegt, um sicher zu gehen, dass sie immer bis ans Ende des Containers reichen. Ihr könnt die Länge aber natürlich auch auf eine andere Breite beschränken. Die 15 Pixel Margin bei beiden Linien stellt den Abstand links und rechts zur Überschrift dar.

Tipp

Wenn du die Linien dicker machen willst, geht das über die border-top-Anweisung. Wenn die Linie dicker wird, wird sie nicht mehr zentriert ausgegeben, das kannst du mit einem negativen margin-top ausgleichen.

Damit wären wir auch schon fertig! Die Vorteile liegen auf der Hand: Wenig HTML, auf jedem Hintergrund anwendbar und funktioniert auf allen Browser ab IE9. Der Nachteil ist, dass wir overflow:hidden benötigen. Sollte das aber kein Problem für euch darstellen, hab ihr hiermit eine gute Möglichkeit gefunden eure Überschriften etwas aufzupeppen.

Ich will für diese Lösung übrigens ganz sicher keine Anerkennung ernten, 1. hat mein Kollege diese Variante verfasst, ich hab sie lediglich leicht verändert und veröffentlicht, und 2. hat diese Variante sicher schon jemand irgendwo in dieser Form bereits gemacht und ich hab es nur übersehen. Solltet ihr übrigens Verbesserungen finden oder eine gänzlich andere Methode bevorzugen, würde ich mich über einen Kommentar sehr freuen.