CSS - How to color text halfway, progress bar-style?

Asked Nov 10 '13 at 16:31

Active Nov 10 '13 at 16:31

Viewed 380 times

I'm trying to style my custom progress bars, but I'm having trouble partially coloring the text when the progress bar is overlapping the text.

Someone else had this question, but I don't like the answer of having duplicate elements to achieve the effect.

The other answer doesn't work anymore in modern Webkit browsers, it seems.

Is it possible to do this with only one overlapping element?

HTML:

<div class="bar-wrapper">
    <label class="bar-lbl four passed"><span>Q1</span></label>
    <label class="bar-lbl four passed"><span>Q2</span></label>
    <label class="bar-lbl four passed"><span>Q3</span></label>
    <label class="bar-lbl four current"><span>Q4</span></label>

    <div class="bar" data-percent="50"></div>
</div>

edited May 23 '17 at 12:05

Community

asked Nov 10 '13 at 16:31

jlmmns

FYI: The "other answer" works fine in my Chrome 30.0.1599.101 m – h2ooooooo Nov 10 '13 at 16:34
@h2ooooooo Weird. Are you using Windows? I'm using OS X. – jlmmns Nov 10 '13 at 16:34
Yeah - Windows 7 64 bit – h2ooooooo Nov 10 '13 at 16:35
On OS X Mavericks, it won't work in Chrome 30.0.1599.101, or Safari 7. But it does work in Firefox 24 and 25. – jlmmns Nov 10 '13 at 17:48

CSS - How to color text halfway, progress bar-style?

0 Answers0