Mobirise Tutorials

Das <hr> Element

Hier habe ich optisch Blöcke mit einem <hr> Element "Horizontal Rule" getrennt. Ein <hr> Tag lässt sich mit CSS gestalten. Dabei wird die Dicke der Linie mit der Höhe (height) bestimmt:

hr {
  background-color: #ff0000;
  opacity: 0.8;
  height: 3px;
  width: 100%;
}


---

Oben als Demo ein nicht formatiertes <hr> Tag.

Unten als Beispiel einer horizontalen Linie diesmal als Class, wobei man die class="myhr" dann einfach an das Tag schreibt:

<hr class="myhr">

Hier mit einer Breite (width) von 80% des Containers und in schwarzer Farbe mit einer Deckkraft von nur 20%. Um diese Linie zu zentrieren, kann man einen automatischen Außenabstand (margin) links und rechts angeben:

.myhr {
  background-color: #000000;
  opacity: 0.2;
  height: 2px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}


---