Horizontale Linie

Traditionell erzeugt <hr> eine visuelle Linie. Heute liegt der Fokus mehr auf der semantischen Bedeutung.
Die Darstellung (Linie, Verlauf, etc.) kann mit CSS gestaltet werden. (Barrierefreiheit)

• Visuelle Trennung: Zeichnet eine durchgehende horizontale Linie, die Abschnitte voneinander abgrenzt.
• Semantische Bedeutung: Zeigt einen thematischen Bruch an.
• Strukturierung: Hilft, Inhalte zu gliedern und die Benutzerfreundlichkeit zu erhöhen.

---

---

---

---

---

---

---

---

---

---

hr{border: none;}

Zuerst wird mit CSS der Boder auf 0 gesetzt.

Horizontale Linie styling

---

hr.red{ border-bottom:2px solid red;}

Der <hr> kann jede Farbe haben.

---

hr.auslaufend {
  height: 2px;
  background-image: linear-gradient(to right, #eee, #000, #eee);
}

---

hr.neon {
  height: 2px;
  background-image: linear-gradient(to right, rgba(0,0,0,0), #00f2fe, #4facfe, rgba(0,0,0,0));
  box-shadow: 0 0 10px #4facfe;
  margin: 40px 0;
}

---

hr.grad-multi {
  height: 5px;
  background-image: linear-gradient(to right, red, cyan, green, yellow);
}

---

hr.dash {
  border-top: 2px dashed #fff;
  background: #17527B;
}

---

hr.animate {
  height: 4px;
  background: indigo;
  width: 80%;
  margin: 50px auto;
  animation: pulse 2s infinite ease-in-out;
}
  @keyframes pulse {
    0% {
    transform: scaleX(0.2);
    opacity: 0.2;
    }
    50% {
    transform: scaleX(1);
    opacity: 1;
    }
    100% {
    transform: scaleX(0.2);
    opacity: 0.2;
    }
}

---

/* Das SVG ist als Data-URI direkt eingebettet */
    hr.zigzag {
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpath d='M0 10 L10 0 L20 10' fill='none' stroke='%23ff0055' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 20px 10px;
    margin: 30px 0;
}

---

hr.bgimg {
    height: 10px;
    background-image: url(../images/list.gif);
    background-repeat: repeat-x;/* Wiederholt das Muster horizontal */
    background-size: 20px 10px;
    margin: 30px 0;
}

---

 hr.icon-separator {
  height: 2px;
  background: magenta; /* Die Grundlinie */
  margin: 40px 0;
  position: relative;
  overflow: visible;
}

hr.icon-separator::after {
  content: "";
  background: white url(../images/list.gif) no-repeat center;
  background-size: 20px;
  
  /* Positionierung genau in der Mitte */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  /* Grösse des Icons + Abstand zur Linie */
  width: 40px;
  height: 40px;
}

---

Demo auf CodePen

---