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); }

以上尝试均未成功。对于:before 和:after，还尝试了具有不同CSS 代码块的上述每个版本。

目标

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

JsFiddle 演示

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

更新

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

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

结论

显然，当我们在 CSS 中注入静态内容时，它会起作用。但如果我们使用来自data-* 的内容，则不会。

Answer 1

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

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

换句话说，这会将progress 归类为replaced element。就像传统的input和其他被替换元素的表单元素一样，还有img，CSS2.1对于使用生成的内容没什么好说的：

注意。本规范并未完全定义 :before 和 :after 与替换元素（如 HTML 中的 IMG）的交互。这将在未来的规范中更详细地定义。

众所周知，基于 Gecko 的浏览器选择不支持为替换元素生成的内容，而基于 WebKit 的浏览器在某种程度上允许它，至少对于被替换元素的表单元素。 （有趣的是，progress::before 和 progress::after 在 任何 浏览器中都不起作用。）因此，如果您问是否可以跨浏览器执行此操作，答案是否定的，而且一直都是没有。

---

至于为什么 WebKit 浏览器可以插入字符串而不是 attr() 值，我不确定。 CSS2.1 和CSS3 Units and Values 都声明attr() 应该从生成这些伪元素的实际元素的属性中获取值，因为伪元素本身不能具有属性无论如何。这就是我难过的地方。

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

也许问题的根源在于您正试图将生成的内容添加到其他伪元素中，无论出于什么奇怪的原因，这似乎在 WebKit 浏览器中仍然有效。与上述在替换元素中生成内容的问题不同，当前的 Selectors 3 规范和即将发布的 Selectors 4 规范都非常清楚这一点：每个复杂选择器不应该有多个伪元素。当然，WebKit 在实现伪元素方面臭名昭著地藐视了各种规则，所以事后看来，看到 WebKit 搞砸了，我并不感到惊讶。

无论哪种方式，真正的结论是CSS生成内容的实现非常差，超出了当前CSS2.1 + Selectors标准的范围，我的意思是为input和@等替换元素生成的内容987654346@，以及在单个选择器中嵌套伪元素。

Answer 2

<progress></progress>

它不接受文本，你需要做的就是调整你的 CSS。

HTML：

<progress max="100" value="80" data-value="80"></progress>
<span class="percentage">80% Done</span>

CSS：

progress { margin: 0px; width:250px; border:0; }

/* CSS (Attempt 1) */

    progress:before, progress:after { content: attr(data-value); }

/* CSS (Attempt 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 (Attempt 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); }

    .percentage{
        float: left;
        margin-left:100px;
        margin-top: -20px;
        position: absolute;
        display: block;
        color: #FFF;
    }

Answer 3

看来@BoltClock 是正确的——content: attr(value) 正在寻找-webkit-progress-value 的影子DOM 元素上的value 属性，而不是实际的<progress> 元素：

h4 { margin: 2em 0 0; }
progress {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}
progress::-webkit-progress-value:before {
  position: absolute;
  right: 0;
  bottom: -125%;
}
progress.show-value::-webkit-progress-value:before {
  content: attr(value);
}
progress.show-data-value::-webkit-progress-value:before {
  content: attr(data-value);
}
progress.show-style::-webkit-progress-value:before {
  content: attr(style);
}
progress.show-pseudo::-webkit-progress-value:before {
  content: attr(pseudo);
}

<h4><code>attr(value)</code>:</h4>
<progress class="show-value" max="100" value="80" data-value="5"></progress>

<h4><code>attr(data-value)</code>:</h4>
<progress class="show-data-value" max="100" value="80" data-value="5"></progress>

<h4><code>attr(style)</code>:</h4>
<progress class="show-style" max="100" value="80" data-value="5"></progress>

<h4><code>attr(pseudo)</code></h4>
<progress class="show-pseudo" max="100" value="80" data-value="5"></progress>