Html 如何在HR标签的中间给予空间？

JSFIDDLE:

HTML代码：

---

正如你所看到的，在HR的中间有一个图标。我想在HR的中间给出一些<强>空间< /强>，这样行不会在图标上方或下方。有什么建议吗？

您可以使用Flexbox

.line{
显示器：flex；
宽度：100%；
对齐项目：居中；
证明内容：中心；
}
人力资源{
边界：0；
边框顶部：4倍双黑色；
弹性：1；
z指数：1；
}
i:之后{
字体大小：30px；
颜色：黑色；
填充：20px；
内容：'\2665'；
显示：内联块；
}

您可以将hr css的边距：15px左右作为一个选项，但它将从侧面而不是从中间切割@ClearBoth你能改变HTML吗？没错Harry@Harry看看这个答案中的两个选项-。他们只生产一行，而不是两行，但应该给你的想法

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

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