Как сделать текст в прогрес-баре?

Question

[Tosha1337]

Возможно, этот нубский вопрос поставлен не совсем корректно, но подскажите, пожалуйста, как разместить кол-во процентов по центру серой линии в myProgress, чтобы зелёная полоса myBar не смещалась?

document.querySelector('.test').innerHTML = `<style>
#myProgress {
  width: 350%;
height: 20px;
  background-color: #cecaca;
}
#myBar {
  width: 10%;
  height: 20px;
  background-color: #04AA6D;
  text-align: center;
  line-height: 20px;
  color: white;
}
</style>
<div id="myProgress">
  <div id="myBar">10%</div>
</div>

Answer 1

[SuperToster]

Добавить еще один блок:
jsfiddle.net/9dmyu27s/

Если нельзя менять разметку, можно добавить дата атрибут:
jsfiddle.net/swjdyxh9/

Вариантов море, нужно больше вводных.

Comments

[Tosha1337]

Ссылки не открываются, но спасибо за наводку

[SuperToster]

Tosha1337,
Если не открываются, VPN в помощь. Либо примеры ниже:

Раз

<div id="myProgress">
  <div id="myBar"></div>
  <span>10%</span>
</div>

#myProgress {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #cecaca;
}

#myBar {
  width: 10%;
  height: 20px;
  background-color: #04AA6D;
}

#myProgress span {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  z-index: 2;
  display: flex;
	justify-content: center;
	align-items: center;
  color: white;
}

Два

<div id="myProgress" data-progress="10%">
  <div id="myBar"></div>
</div>

#myProgress {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #cecaca;
}

#myBar {
  width: 10%;
  height: 20px;
  background-color: #04AA6D;
}

#myProgress::after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  z-index: 2;
  content: attr(data-progress);
  display: flex;
	justify-content: center;
	align-items: center;
  color: white;
}