Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Überschrift über durchgestrichener Linie

Pseudoelemente im Einsatz

Überschrift über durchgestrichener Linie

Manchmal sind es kleine Designdetails, die besonders viel Zeit in der Realisierung kosten. Ein Beispiel zeigt, wie ihr Überschriften interessanter gestaltet, ohne Grafiken zu nutzen.

Es gibt Designdetails, die sehen unspektakulär aus, sind aber nicht so einfach in der Umsetzung. Dies gilt auch für die folgende Idee, Überschriften mittig über eine horizontale Linie zu setzen:

Drei Überschriften über durchgestrichenen Linien platziert und unterschiedlich ausgerichtet.
Headlines mit netten Strichen

Der erste Lösungsvorschlag

Fangen wir mit dem schlichten HTML-Code an. Damit wir die Überschrift von anderen absetzen können, geben wir ihr die Klasse .separator:

  1. <h2 class="separator">
  2.   What a stunning headline
  3. </h2>

Die Überschrift wird von einer Linie umschlossen, die sich auf der Höhe der Mitte der Headline befindet. Die Eigenschaft border können wir hierfür nicht nutzen, auch wenn sie als erstes in den Sinn kommt. Schließlich können wir die Box der Überschrift nicht nach innen kollabieren lassen.

Es bieten sich aber zwei leicht unterschiedliche Herangehensweisen an, dieses Design umzusetzen. Beide nutzen dabei den Umstand, dass bei den meisten Elementen, so auch bei Überschriften, zwei Pseudoelemente »kostenlos« mitkommen: :before und :after. Diese nutzen wir im Folgenden zur Erzeugung der Linien. Aber zuerst geben wir der Überschrift ein position: relative mit, damit wir später die Linie absolut positionieren können:

  1. .separator {
  2.   overflow: hidden;
  3.   position: relative;
  4.   text-align: center;
  5.   color: #a20000;
  6.   margin: 40px 0;
  7. }  

Zusätzlich sorgt overflow: hidden dafür, dass die Linie abgeschnitten wird, sollte sie überstehen. Als Standard setzen wir eine zentrierte Ausrichtung sowie eine rote Schriftfarbe fest. Beides kann später durch Modifikatoren (das sind spezialisierte Klassen) verändert werden.

Die Linie wird mit einem der beiden oben erwähnten Pseudo-Elementen erzeugt:

  1. .separator:before {
  2.   content: "";
  3.   display: inline-block;
  4.   width: 10000px;
  5.   height: 1px;
  6.   border-bottom: 1px solid #a20000;
  7.   position: absolute;
  8.   top: 50%;
  9.   left: 0;
  10. }

Das Pseudo-Element bekommt eine minimale Höhe. Die Linie entsteht durch die untere Border des Pseudo-Elements. Damit wir Breite und Höhe zuweisen können, wird aus dem Pseudo-Element ein inline-block-Element gemacht.

Die Breite ist ganz bewusst sehr groß gewählt. So kann die Überschrift auch auf Monitoren mit ganz großen Auflösungen mühelos den Strich zeigen. Alles Überflüssige wird sodann dank overflow: hidden auf dem Elternelement abgeschnitten.

Durch die Modifikatoren .left-aligned und .right-aligned können Webworker die horizontale Ausrichtung der Überschrift verändern:

  1. .left-aligned {
  2.   text-align: left;
  3. }
  4. .right-aligned {
  5.   text-align: right;
  6. }

Im jetzigen Zustand geht die Linie aber leider durch die Überschrift in der zentrierten Variante. Deshalb bekommt der Headline-Text einen Wrapper, der für die Überdeckung der Linie sorgen wird.

  1. <h2 class="separator">
  2.   <span>What a stunning headline</span>
  3. </h2>

Es ist bedauerlich, dass ein zusätzliches Element für Designzwecke eingeführt werden muss, aber dies lässt sich in der Praxis oft nicht verhindern. Es ist die Aufgabe eines guten Frontendentwicklers, zusätzliches Markup auf ein Mindestmaß zu beschränken.

Die weiße Abdeckung der Linie entsteht aus einer Kombination von Hintergrundfarbe und horizontalem padding. Die Maximalbreite sorgt dafür, dass ein wenig von der Linie sichtbar bleibt, auch wenn der Text sehr lang wird.

  1. .separator span {
  2.   position: relative;
  3.   padding: 0 10px;
  4.   display: inline-block;
  5.   max-width: 80%;
  6.   background-color: #fff;
  7. }

Damit diese Maximalbreite einem Inline-Element wie dem SPAN-Element zugewiesen werden kann, muss es mit display: inline-block dazu in Lage versetzt werden. Zudem kann dann dem Element auch vertikales padding zugewiesen werden, was in manchen Designs gewünscht sein kann. Interessanterweise deckt das SPAN-Element erst durch die Beigabe von position: relative ab.

Alle Einzelphasen zusammen findet ihr im dazugehörigen Codepen. Wer Sass nicht nutzt, klickt am besten im CSS-Editor von Codepen auf »View Compiled«, um das resultierende CSS angezeigt zu bekommen.

Eine zweite Version

Die eben diskutierte Lösung ist nicht perfekt. Sie hat einen entscheidenden Nachteil: Sie arbeitet mit einer Hintergrundfarbe. Diese muss je nach Hintergrund angepasst werden. Bei Verläufen oder gar Bildern im Hintergrund könnte die eben vorgestellte Lösung störend wirken. Deshalb soll eine zweite Lösung die Einsatzöglichkeiten erweitern, die Designlösung flexibler machen. Das HTML bleibt bestehen, es bleibt also auch beim zusätzlichen SPAN-Element.

Wir nutzen nun beide Pseudo-Elemente und wenden sie auf das SPAN-Element an, nicht auf das Überschriften-Element.

  1. .separator span:before,
  2. .separator span:after {
  3.   content: "";
  4.   position: absolute;
  5.   width: 10000px;
  6.   height: 1px;
  7.   top: 50%;
  8.   border-bottom: 1px solid #a20000;
  9. }
  10.  
  11. .separator span:before {
  12.   left: -10000px;
  13. }
  14.  
  15. .separator span:after {
  16.   left: 100%;
  17. }

Die meisten Eigenschaften sind identisch mit der ersten Version; sie sind nur dem SPAN-Element zugewiesen. Anstatt eine große Linie zu zeichnen und diese dann abzudecken, erstellen wir zwei separate Linien, die in unterschiedliche Richtungen geschickt werden. Die nach rechts abgehende Linie ist die des Pseudo-Elements :after, nach links geht die des Pseudo-Elements :before.

Auch für diese Lösung gibt es wieder ein Codepen für eigene Experimente.

Robuste Lösungen

Beide Lösungen sind robust und einfach zu implementieren. Einziger Schönheitsfehler ist der zusätzliche Wrapper um den Überschriften-Text. Die zweite Lösung ist insgesamt flexibler, auch wenn sie aufgebläht erscheint.

Kommentare

Gunnar Bittersmann
am 18.12.2015 - 11:06

Zuerst hab ich mich gefragt, ob der Jens heimlich doch im SELFHTML-Forum mitliest. ;-) Da gab’s vor einiger Zeit mal diesen Thread.

TL;DR: Nach einigen Versuchen mit irgendwelchen Macken war ich am Ende auf diese Lösung gekommen, die sowohl ohne eigene Hintergrundfarbe als auch ohne zusätzlches span-Element auskommt.

Permanenter Link

Gunnar Bittersmann
am 18.12.2015 - 11:38

Zwei Jahre später würde ich dann aber doch eine Lösung mit Flexbox in Erwägung ziehen.

Permanenter Link
Jens Grochtdreis

Jens Grochtdreis (Autor)
am 18.12.2015 - 21:34

Deine dabblet-Lösung kommt aber auch ohne Flexibilität aus, wie Du sehr schnell siehst, wenn Du mal ein wenig mehr Inhalt reinschreibst. Die Headline sollte selbstverständlich nicht mundgerecht gestylt werden müssen. Die Lösung muss einfach so funktionieren. Deine tut es nicht.

Mich erfreut es auch nicht, extra Elemente genutzt zu haben. Aber so schlimm ist es nun auch wieder nicht, oder?

Permanenter Link

Gunnar Bittersmann
am 18.12.2015 - 21:56

Autsch! Ich hätte mir den alten Kram nochmal ansehen sollen, bevor ich den hier anführe. Die „Tabellenzelle“ wird so schmal wie möglich … :-( Nein, die Lösung von 2013 funktioniert nicht. Da haste völlig recht.

Merke: Als Beispieltext immer besser mehr als nur ein einzelnes Wort verwenden!

Extra-Elemente so schlimm nun auch wieder nicht? Nun, es könnte jemand auf die Idee kommen, den HTML-Code aufzuräumen, also die vermeintlich überflüssigen spans zu entfernen. (Das kann jemand anders sein oder das eigene Ich nach einigen Jahren. Oder Monaten. Oder schon nach einigen Tagen. ;-))

Aber die Flexbox-Lösung funktioniert doch wirklich – auch ohne Extra-Elemente, oder?

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 20.12.2015 - 12:20

Extra-Elemente so schlimm nun auch wieder nicht? Nun, es könnte jemand auf die Idee kommen, den HTML-Code aufzuräumen, also die vermeintlich überflüssigen spans zu entfernen. (Das kann jemand anders sein oder das eigene Ich nach einigen Jahren. Oder Monaten. Oder schon nach einigen Tagen. ;-))

Oder das CMS wird upgedated und spuckt kein <span> mehr aus, ein Debugging-Albtraum.

Ich habe auf meinem Blog ein bisschen mit dem Flexbox-Ansatz gespielt (bevor ich Gunnars Kommentar las) und danach mit flex-grow und flex-shrink gespielt. Und dann auch noch einmal mit border-image.

Permanenter Link
Jens Grochtdreis

Jens Grochtdreis (Autor)
am 20.12.2015 - 15:17

Die Flexbox-Lösungen finde ich gut. Und so langsam finde ich auch Gefallen an der Technik. Denn ab 2016 wird es auch für die rückständigste Firmen-IT schwer werden, die Uralt-IEs am Leben zu erhalten. Hoffnung macht sich in meinem alten Herz breit, dass die IE vor Version 11 demnächst aus unseren Statistiken verschwinden werden.
Permanenter Link

Matthias Apsel
am 24.12.2015 - 14:29

Deine dabblet-Lösung kommt aber auch ohne Flexibilität aus,

die sich per white-space: nowrap; leicht hinzufügen ließe. Für ganz schmale Viewports lässt man es bei white-space: normal;, mittelbreite bekommen mit &shy; eine Sollbruchstelle verpasst.

Vergleicht man allerdings den Aufwand, so schlägt der Zeiger ganz klar in Richtung flexbox aus.

Permanenter Link

Die Kommentare sind geschlossen.