Прогресс с эталонной линией с использованием CSS и HTML ⇐ CSS

[Anonymous]

Я пытаюсь достичь аналогичного пользовательского интерфейса, как показано на изображении:


Это не обычная панель прогресса. Мне нужно добавить ссылочную строку данных, имя для справочной строки (на рисунке это «сегодня») и текст внутри строки прогресса. Может ли кто -нибудь помочь мне с этим? Я могу найти только обычную панель хода прогресса, и я не могу добавить в нее ссылочную строку и текст справочной строки: (< /p>
У меня работа работают, но я не знаю, как добавить справочную строку и справочный текст. < /P>
#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
}

30%




Подробнее здесь: https://stackoverflow.com/questions/319 ... s-and-html