CSS内容:HTML5进度上的attr()不起作用

Question

HTML

<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代码块尝试了上述每个版本的for :before和:after.

目的

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

JsFiddle演示

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

UPDATE

当我使用以下CSS时,它可以工作.

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

结论

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

Answer 1

在我原来的评论中,我说:

我不认为这是可能的,因为progress如果浏览器已经可以绘制进度条,则元素中的内容永远不会显示,类似于object或中的内容iframe.

换句话说,这被归类progress为替换元素.正如input替换元素的传统和其他表单元素一样img,CSS2.1对使用生成的内容没有多少说法:

注意.此规范未完全定义:替换元素(例如HTML中的IMG)之前和之后的交互.这将在未来的规范中更详细地定义.

众所周知,基于Gecko的浏览器选择不支持替换元素的生成内容,而基于WebKit的浏览器在某种程度上允许它,至少对于替换元素的表单元素.(有趣的是,progress::before并且progress::after不能在任何浏览器中工作.)因此,如果你问是否可以进行这种跨浏览器,答案是否定的,而且一直都没有.

至于为什么WebKit浏览器可以插入字符串而不是attr()值,我不确定.既CSS2.1和CSS3单位和值该状态attr()应该从实际元素产生的那些伪元素的属性值,因为伪元素不能有属性本身无论如何.这是我难倒的地方.

也许浏览器错误地尝试data-value从属性中获取属性::-webkit-progress-bar,::-webkit-progress-value而不是progress元素,这就是为什么content在使用attr()时失败但在使用字符串时工作.

也许问题的根源在于你正在尝试将生成的内容添加到其他伪元素这一事实,这似乎在WebKit浏览器中也可以用于任何奇怪的原因.与上面替换元素中生成内容的问题不同,当前的Selectors 3规范和即将发布的Selectors 4规范都非常清楚:每个复杂选择器不应该有多个伪元素.当然,在实现伪元素时,WebKit臭名昭着地蔑视各种规则,所以事后看来,看到WebKit搞砸了我并不感到惊讶.

无论哪种方式,真正的结论是CSS生成内容的实现超出了当前CSS2.1 +选择器标准的范围,我的意思是生成内容用于替换元素,如input和progress,以及伪元素的嵌套在一个选择器中.