<progress max="100" value="80" data-value="5"></progress>
CSS
progress { margin: 50px; width:250px; border:0; }
CSS(尝试1)
progress:before,progress:after { content: attr(data-value); }
CSS(尝试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(尝试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); }
上述尝试都没有成功。还尝试使用不同的CSS代码块的上述每个版本，用于：之前和之后。
目的
要在HTML5< progress>之前和之后注入CSS生成的内容元件。这可能吗？
JsFiddle演示
http://jsfiddle.net/pankajparashar/MNL2C/
UPDATE
当我使用以下CSS它的作品。
progress::-webkit-progress-bar:before,progress::-webkit-progress-bar:after { content: '123'; }
结论
解决方法
I don’t think this is possible as content within the
progresselement is never displayed if the browser can already draw the progress bar,similarly to content within anobjectoriframe.
换句话说，它将进度作为一个replaced element进行分类。正如传统的输入和其他替换元素以及img一样，CSS2.1与使用生成的内容没有什么关系：
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
基于Gecko的浏览器选择不支持已替换元素的生成内容，而基于WebKit的浏览器在某种程度上允许它至少对于已替换元素的表单元素，这一点已经确定了。 (有趣的是，progress :: before和progress :: after不能在任何浏览器中运行)所以如果你问这个跨浏览器是否可以做到这一点，答案是否定的，一直是没有的。
至于为什么WebKit浏览器可以插入字符串而不是attr()值，我不确定。 CSS2.1和CSS3 Units and Values都声明attr()应该从生成这些伪元素的实际元素的属性中获取值，因为伪元素本身不能有属性。这是我被困的地方
也许浏览器错误地尝试从:: – webkit-progress-bar和:: – webkit-progress-value中获取data-value属性，而不是进度元素，这就是为什么使用attr()但是工作时内容失败的原因当使用字符串。
也许这个问题的根源在于你正在尝试将生成的内容添加到其他伪元素，这似乎在任何奇怪的原因在WebKit浏览器中工作。与替换元素中生成的内容的上述问题不同，当前的Selectors 3规范和即将到来的Selectors 4规范都非常明确：您不应该对每个复合选择器拥有多个伪元素。当然，WebKit在实现伪元素方面臭名昭着的是藐视各种规则，所以事后看起来，WebKit搞砸这样做并不奇怪。
无论哪种方式，真正的结论是，CSS生成的内容的实现是非常差的，超出了CSS2.1选择器的当前标准的范围，我的意思是生成内容替换元素，如输入和进度，单个选择器中的元素。
