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

Question

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

其他人有question，但我不喜欢answer有重复元素来实现效果。

other answer在现代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>