CSS content attr on html5 progress not working.

[Pankaj Parashar]

HTML

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

CSS

progress { margin: 50px; width:250px; border:0; }

CSS (Attempt 1)

progress:before, progress:after { content: attr(data-value); }

CSS (Attempt 2)

progress::-webkit-progress-bar:before,
progress::-webkit-progress-bar:after { content: attr(data-value); }

progress::-moz-progress-bar:before,
progress::-moz-progress-bar:after { content: attr(data-value); }

CSS (Attempt 3)

progress::-webkit-progress-value:before,
progress::-webkit-progress-value:after { content: attr(data-value); }

progress::-moz-progress-value:before,
progress::-moz-progress-value:after { content: attr(data-value); }

None of the above attempts succeeded. Also tried each of the above versions with different css code blocks, for :before and :after.

OBJECTIVE

To inject css generated content before and after the html5 <progress> element. Is this possible?

JsFiddle Demo

http://jsfiddle.net/pankajparashar/MNL2C/

[Paulie_D]

http://html5doctor.com/the-progress-element/

Sounds like a job for JS

[Author]

Posts