Die hr-Trennlinie richtig stylen: damals Browserkampf, heute drei Zeilen

Eine waagerechte Trennlinie – schlichter geht es kaum. Trotzdem war das <hr>-Element jahrelang ein zuverlässiger Quell von Ärger, weil jeder Browser es anders zeichnete. Dieser Beitrag stammt ursprünglich aus dem Jahr 2007. Wir haben ihn erhalten und um den heutigen Stand ergänzt.

Das Problem von damals

HTML bot mit <hr> ein fertiges Element für Trennlinien an. Nur stellte es jeder Browser anders dar, und die verfügbaren Attribute wurden unterschiedlich interpretiert. Wer eine schlichte, ein Pixel hohe Linie wollte, kämpfte gegen drei Eigenheiten gleichzeitig:

• Zwei Eigenschaften für dieselbe Farbe. Firefox und Opera richteten sich nach background-color, der Internet Explorer nach color. Wer nur eine davon setzte, bekam in der Hälfte der Browser eine grau umrandete Linie.
• Der voreingestellte Rahmen. Ohne border: 0 zeichneten die Browser eine zweifarbige 3D-Kante, die aus der Zeit stammte, als Trennlinien graviert aussehen sollten.
• Unsichtbare Abstände. Der Internet Explorer setzte oberhalb und unterhalb rund sieben Pixel Abstand, die sich mit margin: 0 nicht entfernen ließen.

Die Lösung, die damals überall funktionierte, sah so aus:

hr {
  background-color: #000; /* Farbe fuer Opera und Firefox */
  color: #000;            /* Farbe fuer den Internet Explorer */
  border: 0;
  height: 1px;
}

Und selbst damit blieb die Linie in Opera bei größeren Höhen zwei Pixel zu hoch. Viele Entwickler wichen deshalb ganz auf ein leeres <div> mit border-top aus – technisch sauberer im Ergebnis, aber semantisch falsch, weil die Bedeutung „thematischer Übergang“ verloren ging.

Wie es heute geht

Die Browserunterschiede sind verschwunden. color braucht niemand mehr, und statt Höhe plus Hintergrundfarbe reicht ein einzelner Rahmen:

hr {
  border: 0;
  border-top: 1px solid #d9d9d9;
  margin: 2rem 0;
}

border: 0 ist übrigens weiterhin nötig – die Standarddarstellung mit der 3D-Kante steckt bis heute in den Browser-Voreinstellungen.

Varianten, die früher Grafiken gebraucht hätten

Eine auslaufende Linie, die zu den Rändern hin transparent wird, war 2007 nur als PNG denkbar. Heute ist es ein Verlauf:

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #d9d9d9 20%, #d9d9d9 80%, transparent);
}

Auch eine Trennlinie mit Symbol in der Mitte kommt ohne Bild aus:

hr.mit-zeichen {
  border: 0;
  text-align: center;
  overflow: visible;
}
hr.mit-zeichen::after {
  content: "§";
  display: inline-block;
  background: #fff;
  padding: 0 12px;
  color: #999;
  transform: translateY(-50%);
}

Wann man hr heute überhaupt einsetzt

Seit HTML5 hat das Element eine klare Bedeutung bekommen: Es steht für einen thematischen Wechsel im Inhalt – etwa den Übergang zu einem neuen Abschnitt innerhalb eines Kapitels. Daraus folgt eine Faustregel, die es 2007 so noch nicht gab:

• Inhaltlicher Einschnitt? Dann <hr>. Screenreader kündigen das als Übergang an, was der Struktur hilft.
• Nur optische Trennung? Dann gehört die Linie als border-top an das Element, das ohnehin da ist – etwa an einen Abschnitt oder ein Listenelement. Ein leeres Element nur für eine Linie ist unnötig.

Wer die Linie rein dekorativ einsetzt und trotzdem <hr> verwendet, kann sie mit role="presentation" aus der Vorlesereihenfolge nehmen.

Fazit

Vom Browser-Flickwerk mit doppelter Farbangabe zu drei Zeilen, die überall gleich aussehen: Das <hr>-Element ist eines der Beispiele, bei denen sich das Web spürbar beruhigt hat. Die spannendere Frage ist heute nicht mehr die Darstellung, sondern ob eine Trennlinie an dieser Stelle überhaupt etwas aussagt.

Bei Fragen rund um saubere Umsetzung und Barrierefreiheit helfen wir als Agentur für Programmierung gerne weiter.