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

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>

Answer 2

This is done(corrected) exactly what you want.

.outer-h2 {
        width: 100px;
    text-align: center;
    border-bottom: 1px solid #cccccc;
    line-height: 0.1em;
    margin: 20px auto 35px;
    float:left;
}
 .outer-span {
     background: #fff;
    padding: 0px 10px;
    color: #bec3c7;
    margin: 10px;
    float:left;
}

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

Answer 3

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

Click here for DEMO

Answer 4

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

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

try this i think this is the solution you wanted. please let me know if i am correct or not

Answer 5

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>