使用CSS在进度条上显示进度条的值(数字)，例如55％ [英] Show a progress bar's value (number) like 55% on the bar by using CSS

问题描述

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

I want to show the value of a progress bar on the body along with the color.

我确实尝试使用下面的代码，但未能成功.有什么方法可以在进度条或进度标签/元素的正文上显示进度百分比.

I did try using the code below but couldn't succeed. Is there any way to show the percentage of progress on the body of the progress bar or progress tag/element.

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

推荐答案

您可以为每个progress元素添加一个伪元素，然后使用

You can add a pseudo element to each progress element and use the attr() CSS function to display the value attribute as the content of the pseudo element:

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>

这篇关于使用CSS在进度条上显示进度条的值(数字)，例如55％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！