使用CSS在栏上显示进度条的值(数字),如55%

Question

我想在主体上显示进度条的值以及颜色.

我确实尝试使用下面的代码,但无法成功.有没有办法显示进度条或进度标签/元素正文的进度百分比.

<progress  max="100" value="26"></progress><br/>
<progress  max="100" value="26">26%</progress><br/>
<progress  max="100" value="26"><span>26%</span></progress>

Answer 1

您可以向每个progress元素添加一个伪元素,并使用attr()CSS函数将该value属性显示为伪元素的内容:

progress {
  text-align: center;
}
progress:after {
  content: attr(value)'%';
}

<progress max="100" value="26"></progress><br/>
<progress max="100" value="50"></progress><br/>
<progress max="100" value="73"><span></span></progress>