使用CSS在进度条上显示进度条的值(数字),例如55% [英] Show a progress bar's value (number) like 55% on the bar by using CSS
本文介绍了使用CSS在进度条上显示进度条的值(数字),例如55%的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在身体上显示进度条的值以及颜色.
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>
推荐答案
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屋!
查看全文