How to make space between middle line and text?

Question

So what im trying to do is to make space between middle line and middle text. This is my fiddle: https://jsfiddle.net/abqy4w1f/. So i want that left and right side is 10px from circle. Any suggestion?

.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>

Answer 1

For this particular example you ca do this:

.wrapper{
  display: inline-block;
}
.outter-h2 {
  float: left;
  width: 100px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  margin-top: 4%;
}
.outter-span {
  float: left;
  background: #fff;
  padding: 0 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #bec3c7;
  margin: 0 10px;
}

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

Answer 2

You can easily create a fake space using CSS box-shadow property (this is assuming the shadow color and the background color are the same)

All you have to do is add this line to .outer-span:

box-shadow:0 0 5px 20px #FFF;

This solution keeps the HTML intact.

Demo:

body {
  background: #FFF;
}

.outter-h2 {
  width: 200px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
  line-height: 0.1em;
  margin: 35px auto 35px;
  position: relative;
  z-index:1;
}

.outter-span {
  background: #fff;
  padding: 0 10px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  color: #bec3c7;
  position: relative;
  z-index:3;
  box-shadow:0 0 5px 20px #FFF; /*add space using box-shadow*/
}

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