jquery - CSS - 如何中途着色文本，进度条样式？

Question

我正在尝试设置自定义进度条的样式，但是当进度条与文本重叠时，我无法对文本进行部分着色。

其他人有这个问题，但我不喜欢使用重复元素来达到效果的答案。

看来，另一个答案在现代 Webkit 浏览器中不再适用。

是否可以仅使用一个重叠元素来执行此操作？

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>