Show bar value (number) displayed in bar (e.g. 55%) using CSS

Question

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

I tried using the code below but could not. Is there a way to show the percentage of progress in the body of a 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> 

Answer 1

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> 

Answer 2

 <progress id="progressBar" value="50" max="100" align="center" style="width:400px;"></progress> progress#progressBar:before { display: inline; content: "%" attr(value); }