Show a progress bar's value (number) like 55% on the bar by using CSS

Question

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>

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>