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/
UPDATE
When I use the following CSS it works.
progress::-webkit-progress-bar:before,
progress::-webkit-progress-bar:after { content: '123'; }
CONCLUSION
Apparently when we inject static content in the CSS, it works. But if we use the content from data-*
it doesn't.