CSS内容：HTML5进度上的attr（）不起作用

小编典典

CSS内容：HTML5进度上的attr（）不起作用

css

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/

更新

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

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

结论

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

阅读 945

2020-05-16

共1个答案

小编典典

在我的原始评论中，我说：

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

换句话说，这被归类progress为一个替换元素。就像传统的input元素和其他被替换的元素一样img，CSS2.1对于将生成的内容与其一起使用也没什么多说的：

注意。 该规范并未完全定义：before和：after与替换元素（例如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浏览器中使用。与上面的问题不同，替换元素中生成了内容，当前的Selectors3规范和即将推出的Selectors4规范对此都非常清楚：每个复杂的选择器不应有一个以上的伪元素。当然，在实现伪元素时，WebKit臭名昭著地违反了各种规则，因此事后看来，看到WebKit搞砸了这些并不足为奇。

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

2020-05-16