使用 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>

原文由 harish007 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 3.0 许可协议