Javascript 使用css和html的带有参考线的进度条

我正在尝试实现类似的UI，如图像链接所示：。
这不是一个正常的进度条。我需要添加一个参考数据行，参考线的名称（在图片中是“今天”）和进度条内的文本。有人能帮我吗？我只能找到一个正常的进度条，但我无法向其中添加参考数据行和参考行文本：(

我有我的进度条工作，但我不知道如何添加参考线和参考文本

#progress {
 width: 500px;   
 border: 1px solid black;
 position: relative;
 background-color: rgba(0,0,0,0.1);
}

#percent {
 position: absolute;   
 left: 10px;
 color: white;
}

#bar {
 height: 20px;
 background-color: green;
 width: 30%;
 padding: 0px;
 margin: 0px
}

<div id="progress">
    <span id="percent">30%</span>
    <div id="bar"></div>
</div>

#进度{
宽度：500px；
边框：1px纯黑；
位置：相对位置；
背景色：rgba（0,0,0,0.1）；
}
#百分比{
位置：绝对位置；
左：10px；
颜色：白色；
}
#酒吧{
高度：20px；
背景颜色：绿色；
宽度：30%；
填充：0px；
保证金：0px
}
30%

。进度{
宽度：400px；
}
.进度标题跨度{
颜色：#666；
浮动：对；
}
.进步吧{
位置：相对位置；
背景色：#ccc；
}
.进度.bar.百分比{
颜色：白色；
背景色：#0c0；
宽度：70%；
}
.进度条.参考号{
位置：绝对位置；
左：80%；
排名：0；
宽度：1px；
身高：100%；
背景色：黑色；
}
进度条参考号：之前{
内容：attr（数据参考）；
位置：绝对位置；
宽度：100px；
左：-50px；
最高：100%；
颜色：#888；
文本对齐：居中；
}

2015年4月剩余350美元
1300美元中的950美元

你能给我们看看你试过的东西吗？你的进度条工作了吗？是的，添加了我的尝试。