CSS – Wie man ein HTML HR-Element mittels CSS um einen zentrierten Text erweitert

In diesem Snippet zeigen wir, wie man in einem HR-Element einen Text per CSS zentriert einfügt.

Das HR-Element wird verwendet, um HTML-Inhalte in der Darstellung voneinander zu trennen, meist in Form einer horizontalen Linie. Wir wollen nun in der Mitte dieser Linie einen Text anzeigen wie in in folgendem Bild dargestellt.

Das lässt sich z.B. ganz einfach mit CSS lösen. Hier eine Lösungsmöglichkeit:

.hr-text {
  line-height: 1em;
  position: relative;
  border: 0;
  /* das ist die Farbe der Schrift */
  color: black;
  text-align: center;
  height: 1.5em;

  &:before {
    content: '';
    /* Farbe der Linie, hier kann auch linear-gradient verwendet werden für einen Fade-Effekt */
    background: lightgrey;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }

  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 .5em;
    line-height: 1.5em;
    /* einzige Stelle, die eine Anpassung erfordert: Hier muss die Hintergrundfarbe des Containers rein */
    background-color: #fff;
  }
}

Nun kann man im HTML dem HR-Tag die CSS-Klasse und den Inhalt des Textes mitgeben.

<hr class="hr-text" data-content="Mein Text" />

Nun kann man noch mit den Werten spielen, um die Darstellung anzupassen. Zum Beispiel lässt sich ein Gradient verwenden, um die Linie an beiden Enden auslaufen zu lassen.

&:before {
  content: '';
  background: linear-gradient(to right, transparent, #818078, transparent);
  ...
}

Der Text lässt sich variieren, indem man die Werte für color anpasst oder opacity hinzufügt, …

.hr-text {
  ...
  color: #4a4a4a;
  opacity: 0.7;
  ...
}

… so dass der Trenner dann so aussieht.

 

Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.

---

Quellen:

• Code-Beispiel von Scott Zirkel bei Codepen