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对使用生成的内容没有多少说法：

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

基于Gecko的浏览器选择不支持替换元素的生成内容，而基于WebKit的浏览器在某种程度上允许它，至少对于替换元素的表单元素，已经很成熟。（有趣的是，progress::before和progress::after无法在任何浏览器中运行。）因此，如果您询问是否可以执行此跨浏览器，答案是否定的，而且一直没有。

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

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

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

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

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)正在查找value的shadow DOM元素上的-webkit-progress-value属性，而不是实际的<progress>元素：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: