相关疑难解决方法(0)

我想重新创建这个横向规则:

我有双线,但我不知道如何在中心获得某种角色或图像.我想我可以使用:before和:after,但我不知道如何在这种情况下使用它们.为了回答这个问题,我们试着让中心角色成为一个角色.我稍后会弄清楚图像/图标.

想法？这是我的代码:

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #444;
    border-bottom:1px solid #444;
    margin:25px 0px;
}

所以我想做的是在中间和中间文本之间留出空间.这是我的小提琴:https://jsfiddle.net/abqy4w1f/.所以我希望左右两边是圆圈的10px.有什么建议吗？

.outter-h2 {
  width: 200px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  line-height: 0.1em;
  margin: 35px auto 35px;
}
.outter-span {
  background: #fff;
  padding: 0 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #bec3c7;
}

<h2 class="outter-h2"><span class="outter-span">?</span></h2>