CSS - Create a progression indicator

Question

I would like to show the specific CSS presentation I'm trying to achieve: completion bar indicator with two-color font coloring.

The goal is to display something like this: http://jsfiddle.net/ddz86cr3/ But this setting is adjusted by pixel borders.

I used a two-color font question in CSS? to create something approaching:

HTML

<div>
    <span id="span1">15%</span>
    <span id="span2">15%</span>
    &nbsp;
</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 an example: http://jsfiddle.net/va3whf86/

It works great and is very close to what I want, except that it is not the center.

Decision

Midas " " -? javascript .

: 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

- DIV % DIV.

http://jsfiddle.net/va3whf86/9/

<div>
<span id="span1">&nbsp;</span>
<span id="span2">&nbsp;</span>
<div id="text1">15%</div>
&nbsp;
</div>

CSS:

#text1 {
width: 100%;
text-align: center;
display: inline-block;
position: absolute;
}