相关疑难解决方法(0)

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-*它的内容不.

为什么当我使用 Bulma CSS 框架(https://bulma.io/documentation/elements/progress/) 的进度时

我把文本放在标签之间，我看不到任何价值。

<progress class="progress is-danger" value="90" max="100">90%</progress>

如何在布尔玛的进度中间添加文字？