html5中如何取attr,CSS内容：HTML5进度上的attr()不起作用

HTML

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演示

UPDATE

当我使用以下CSS它的作品。

progress::-webkit-progress-bar:before,

progress::-webkit-progress-bar:after { content: '123'; }

结论

显然，当我们在CSS中注入静态内容时，它可以工作。但是，如果我们使用data- *中的内容，它不会。