CSS - Create a progression indicator - css

Question

I would like to display a specific CSS presentation that I'm trying to achieve : a completion bar indicator with a two-tone font coloring.
The goal is to display something like this : http://jsfiddle.net/ddz86cr3/
But this one is ajusted by pixels borders.
I used the question Two-tone font coloring in CSS? to create something approaching :
HTML
<div>
<span id="span1">15%</span>
<span id="span2">15%</span>
</div>
CSS
div {
position: relative;
color: green;
font-size: 50px;
font-family: Georgia;
width: 500px;
border: 1px solid green;
}
div span#span1 {
display: inline-block
height: 100%;
width: 100%;
position: absolute;
color: green;
background-color: white;
overflow: hidden;
text-align: center;
}
div span#span2 {
display: inline-block
height: 100%;
width: 15%;
border-left: 200px solid green;
position: absolute;
color: white;
background-color: green;
overflow: hidden;
}
See example : http://jsfiddle.net/va3whf86/
This one works great and is very close to what I want, except it's not center.
SOLUTION
I used modified version of the solution from Midas in the question Is there any way to change the color of text "halfway" through a character on a webpage?
My version is without javascript and with real colors.
Here is the code : http://jsfiddle.net/ytt2r2sa/
HTML
<span class="progressbar">
<span>50%</span>
<strong style="width: 50%;">
<em>50%</em>
</strong>
</span>
CSS
.progressbar, .progressbar strong {
display:block;
height:1.2em
}
.progressbar, .progressbar em {
width:10em
}
.progressbar strong, .progressbar em {
position:absolute;
top:0;
left:0
}
.progressbar {
color:green;
background:window;
border:1px solid green;
text-align:center;
position:relative
}
.progressbar strong {
background:green;
width:0;
font-weight:normal;
overflow:hidden
}
.progressbar em {
color:white;
font-style:normal
}

Answer 1

One way is to create a DIV and place the % inside the DIV.
http://jsfiddle.net/va3whf86/9/
<div>
<span id="span1"> </span>
<span id="span2"> </span>
<div id="text1">15%</div>
</div>
And add this CSS:
#text1 {
width: 100%;
text-align: center;
display: inline-block;
position: absolute;
}