How to make space between middle line and text? - css

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>

Answer 3

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

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 5

<h2 class="outter-h2"></h2><span class="outter-span">?</span>
<h2 class="outter-h2"></h2>
Click here for DEMO