Ich habe einige Schwierigkeiten, eine Lösung zu finden, um ein HR-Element nach meinen Wünschen zu gestalten.

Wenn Sie sich die folgende Geige ansehen, werden Sie sehen, dass dem hr-Element sowohl: vor als auch: nach Pseudos hinzugefügt wurden.

http://jsfiddle.net/MattStrange/LGEjp/

Soweit ich will, sind beide Kreise auf beiden Seiten korrekt, aber jetzt möchte ich ein Bild genau in der Mitte der Linie einfügen, aber da beide Pseudos aufgegriffen werden, bin ich nicht sicher, wie ich ein Hintergrundbild hinzufügen soll diese Stunde

<hr class="bolt">

hr {
  border: 0 solid #eeedef;
  border-top-width: 1px;
  height: 0;
  margin-top: 60px;
  margin-bottom: 60px;
  float: left;
  clear: both;
  display: block;
  width: 100%;
  position: relative;
}
hr:before, hr:after {
  content: " ";
  width: 5px;
  height: 5px;
  position: absolute;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background-color: #fff;
}
hr:before {
  left: 0;
  bottom: -3px;
}
hr:after {
  bottom: -3px;
  right: 0;
}

Hilfe sehr geschätzt.

Prost