html5 progress css,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代码块for :before和以上每个版本:after。

目的

在HTML5 元素之前和之后注入CSS生成的内容。这可能吗？

JsFiddle演示

更新

当我使用以下CSS时，它可以工作。

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

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

结论

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