默认情况下,您在 <progress></progress>
之间输入的内容标签不会显示。
<progress class="progress" value="15" max="100">15%</progress>
我如何获得 15% 的展示?我正在使用 Bulma 作为框架。
最佳答案
使用伪元素和数据属性(works only on chrome ...)
.progress:before {
content:attr(data-text);
}
.progress {
text-align:center;
}
<progress class="progress" value="15" max="100" data-text="15%"></progress>
或者您可以简单地考虑一个额外的包装器:
.progress:before {
content:attr(data-text);
position:absolute;
left:0;
right:0;
}
.progress {
text-align:center;
display:inline-block;
position:relative;
}
<div class="progress" data-text="15%"><progress value="15" max="100" ></progress></div>
包括 bool 玛:
.progress-container:before {
content: attr(data-text);
position: absolute;
left: 0;
right: 0;
top:0;
line-height:1em;
}
.progress-container {
text-align: center;
position: relative;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="progress-container" data-text="15%"><progress class="progress" value="15" max="100"></progress></div>
关于css - 如何使用 bulma 将文本放入 HTML5 的进度条中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53278520/