如何仅用HTML和CSS实现进度条中间显示进度数值

原生<progress>是浏览器内置的替换元素，写在标签内部的文本不会直接渲染到控件可视区域，因此直接在标签内写进度值无法显示。以下是两种纯HTML+CSS的实现方案，都可以将进度值固定显示在进度条正中间。

方案1：自定义结构实现（推荐，兼容性最佳） #

不依赖原生progress标签，通过自定义DOM结构实现，全浏览器表现一致，样式调整自由度最高。

• HTML代码：

<div class="progress-wrap">
  <div class="progress-fill" style="width: 80%"></div>
  <span class="progress-val">80%</span>
</div>

• CSS代码：

/* 进度条外层容器，作为内部元素的定位参照 */
.progress-wrap {
  position: relative;
  width: 300px;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
/* 进度填充部分，宽度对应进度比例 */
.progress-fill {
  height: 100%;
  background-color: #2563eb;
  border-radius: 999px;
}
/* 进度数值，绝对定位实现水平垂直居中 */
.progress-val {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  color: #000;
  /* 加文字阴影避免进度填充到文字位置时对比度不足看不清 */
  text-shadow: 0 0 2px #fff;
}

修改进度值时，只需要同步调整.progress-fill的width属性和.progress-val的文本内容即可。

方案2：保留原生<progress>标签实现 #

如果需要保留原生progress的语义，可配合伪元素读取自定义属性显示进度值，需要针对不同浏览器内核写适配样式。

• HTML代码（新增data-text属性存储要显示的进度文本）：

<progress id="file" value="80" max="100" data-text="80%"></progress>

• CSS代码：

progress {
  position: relative;
  width: 300px;
  height: 20px;
  border: none;
  border-radius: 999px;
  background-color: #e5e7eb;
}
/* webkit内核（Chrome、Edge、Safari）进度条底槽样式 */
progress::-webkit-progress-bar {
  background-color: #e5e7eb;
  border-radius: 999px;
}
/* webkit内核进度填充样式 */
progress::-webkit-progress-value {
  background-color: #2563eb;
  border-radius: 999px;
}
/* 火狐浏览器进度填充样式 */
progress::-moz-progress-bar {
  background-color: #2563eb;
  border-radius: 999px;
}
/* 伪元素读取自定义属性的文本，居中显示 */
progress::after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 0 2px #fff;
}

注意：该方案需要兼容不同浏览器的私有伪元素，样式可控性弱于自定义结构方案，适合需要保留原生标签语义的场景使用。

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