CSS content: attr() on HTML5 progress doesn't work

You need to add static content in CSS to make it work.

Let us see an example −

HTML

<progress max = "100" value = "60" data-value = "5"></progress>

You need to add the following CSS. This is to add CSS generated content before and after the HTML5 progress element −

progress::-webkit-progress-bar:before, progress::-webkit-progress-bar:after {
   content: '989';
}