Как предоставить пространство в середине тега hr?

Question

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

HTML код:

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

CSS код:

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; 
} 

Как вы можете видеть, есть значок в середине часа , Я хочу дать пробел в середине часа, поэтому линии не будут находиться выше или ниже значка. Какие-либо предложения?

Answer 1

Вы можете сделать это с 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>