如何在Bulma框架的Progress进度条中间添加显示文本？

这个问题其实挺常见的——Bulma默认会把<progress>标签内部的文本给隐藏掉，所以你看不到90%是正常的😉。下面给你两种实用的解决方法，按需选择就行：

方法一：用CSS伪元素（无需修改原有HTML结构） #

这种方法最省心，不用改你现有的HTML，只需要加几行CSS就能让进度值自动显示在中间：

<!-- 你的原有HTML不变 -->
<progress class="progress is-danger" value="90" max="100">90%</progress>

.progress {
  position: relative; /* 为伪元素提供定位基准 */
}

.progress::after {
  content: attr(value) '%'; /* 自动读取progress的value属性值 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 完美居中 */
  color: white; /* 选个和进度条对比明显的颜色，比如白色配红色进度条 */
  font-weight: bold;
  /* 如果进度条较窄，可以加font-size调整文本大小 */
  /* font-size: 0.8rem; */
}

方法二：额外包裹层（支持自定义任意文本） #

如果需要显示的内容不只是进度数值（比如“已完成90%”“加载中...”），可以用一个容器把进度条和文本包起来，通过绝对定位让文本悬浮在进度条上方：

<div class="progress-wrapper">
  <progress class="progress is-danger" value="90" max="100"></progress>
  <span class="progress-text">90% 已完成</span>
</div>

.progress-wrapper {
  position: relative;
  width: 100%; /* 按需调整进度条宽度 */
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  z-index: 1; /* 确保文本在进度条上层，不会被覆盖 */
}

小提示 #

如果进度条的背景色很浅（比如is-info浅色款），可以把文本颜色改成深色（比如#333），或者加个文本阴影增强可读性：

.progress-text {
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

内容的提问来源于stack exchange，提问作者Karter