22

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-*则不会。

4

3 回答 3

10

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

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

换句话说，这归类progress为替换元素。就像传统input和其他表单元素被替换元素一样img，CSS2.1并没有太多关于使用生成内容的说明：

笔记。该规范没有完全定义 :before 和 :after 与替换元素的交互（例如 HTML 中的 IMG）。这将在未来的规范中更详细地定义。

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

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

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

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

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

于 2013-09-23T10:20:18.677 回答
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;
    }
于 2013-09-23T09:33:38.223 回答
0

看来 @BoltClock 是正确的 -content: attr(value)正在寻找value影子 DOM 元素上的属性-webkit-progress-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>

于 2015-12-08T13:24:11.020 回答