How to give space in the middle of hr tag?

Question

JSFIDDLE: https://jsfiddle.net/vezz82tr/

HTML Code:

<div>
Section 1...
</div>
<hr>
<div>
Section 2...
</div>

CSS Code:

hr {
  border: 0;
  border-top: 4px double white;
  text-align: center;
}
hr:after {
  content: '\2665';
  display: inline-block;
  position: relative;
  top: -12px;
  padding: 0 10px;
  background: transparent;
  color: white;
  font-size: 18px;
}

As you can see, there is a icon in the middle of the hr. I want to give some space in the middle of the hr, so the lines will not be above or below the icon. Any suggestions?

Its an option, but Its will cut from the sides and not from the middle. @ClearBoth — Web R, Jan 24 '16 at 08:15
Do you mean to say that the `hr` should be cut into two pieces? One on the left, then the icon in the middle and one on the right? — Harry, Jan 24 '16 at 08:16
Have a look at the two options in this answer - http://stackoverflow.com/questions/23584120/line-before-and-after-title-over-image. They produce only one line and not two but should give you the idea. — Harry, Jan 24 '16 at 08:18
Flexbox is exactly the reason why I linked the above (my answer) but I would like to caution you that flexbox has lesser support than web-tiki's answer in that thread. And no, I am not saying this question/answer is a duplicate because it is slightly different from the other. — Harry, Jan 24 '16 at 08:32

Nenad Vracar · Accepted Answer · 2016-01-24T08:31:40.770

1

You can do this with Flexbox

.line {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

hr {
  border: 0;
  border-top: 4px double black;
  flex: 1;
  z-index: 1;
}

i:after {
  font-size: 30px;
  color: black;
  padding: 20px;
  content: '\2665';
  display: inline-block;
}

<div class="line">
  <hr>
    <i class="heart"></i>
  <hr>
</div>

edited Jan 24 '16 at 08:31

answered Jan 24 '16 at 08:25

Nenad Vracar

118,580
15
151
176

Glad i could help, here is example with Font-awesome https://jsfiddle.net/vezz82tr/3/ – Nenad Vracar Jan 24 '16 at 08:29

How to give space in the middle of hr tag?

1 Answers1