title: CSS - Create a progression indicator
body: <p>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.</p>
  
  <p>The goal is to display something like this : <a href="http://jsfiddle.net/ddz86cr3/" rel="nofollow noreferrer">http://jsfiddle.net/ddz86cr3/</a>
  But this one is ajusted by pixels borders.</p>
  
  <p>I used the question <a href="https://stackoverflow.com/questions/6488950/two-tone-font-coloring-in-css">Two-tone font coloring in CSS?</a>  to create something approaching :</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;span id="span1"&gt;15%&lt;/span&gt;
      &lt;span id="span2"&gt;15%&lt;/span&gt;
      &amp;nbsp;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>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;   
  }
  </code></pre>
  
  <p>See example : <a href="http://jsfiddle.net/va3whf86/" rel="nofollow noreferrer">http://jsfiddle.net/va3whf86/</a></p>
  
  <p>This one works great and is very close to what I want, except it's not center.</p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>I used modified version of the solution from Midas in the question <a href="https://stackoverflow.com/questions/6258690/is-there-any-way-to-change-the-color-of-text-halfway-through-a-character-on-a">Is there any way to change the color of text &quot;halfway&quot; through a character on a webpage?</a>
  My version is without javascript and with real colors.</p>
  
  <p>Here is the code : <a href="http://jsfiddle.net/ytt2r2sa/" rel="nofollow noreferrer">http://jsfiddle.net/ytt2r2sa/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;span class="progressbar"&gt;
      &lt;span&gt;50%&lt;/span&gt;
      &lt;strong style="width: 50%;"&gt;
          &lt;em&gt;50%&lt;/em&gt;
      &lt;/strong&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.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
  }
  </code></pre>