css - 如何使用 bulma 将文本放入 HTML5 的进度条中？

Question

默认情况下，您在 <progress></progress> 之间输入的内容标签不会显示。

<progress class="progress" value="15" max="100">15%</progress>

我如何获得 15% 的展示？我正在使用 Bulma 作为框架。

Answer 1

使用伪元素和数据属性(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>