how to partly reverse a character's color? (its 33% to the left is black and 67% to the right is white)

Answer 1

I imagine the word is actually there twice, once in each colour, but the white version is clipped by the progress bar.

Answer 2

Sample:

<div style="width:400px; height:1.1em; position:relative;">
    <div style="position:absolute; text-align:center; width:400px; height:100%; background-color:#eee;">49 %</div>
    <div style="position:absolute; overflow:hidden; width:195px; height:100%; background-color:#347;">
        <div style="width:400px; text-align: center; color: #ace;">49 %</div>
    </div>
</div>