Bootstrap进度条默认不显示百分比，需通过data-percent属性配合::after伪元素实现；须同步更新该属性、设置父容器position: relative、适配深色背景与响应式字体。
Bootstrap进度条默认不显示百分比数字
Bootstrap 5 的 .progress-bar 元素本身不渲染文字内容，content 伪元素无法直接“读取”其 aria-valuenow 属性值——CSS 不能动态获取 HTML 属性并转为文本，这是常见误解的源头。
- 伪元素
::after的content只支持字符串字面量、attr()（仅限属性原始值）、计数器，**不支持计算或格式化** -
aria-valuenow="75"是数字，但attr(aria-valuenow)输出的是纯字符串"75"，缺个百分号和样式控制 - 直接写
content: attr(aria-valuenow) "%";看似可行，但实际会因 CSS 解析规则失败（%不是合法标识符，需引号包裹）
用 attr() + 字符串拼接实现基础百分比
只要 HTML 中显式写了 data-percent="75" 这类自定义属性，就能用 attr() 安全读取并拼接。这是最轻量、兼容性最好的做法。
- 在
<div class="progress-bar">上加data-percent="75"，不要依赖aria-valuenow - CSS 写成：
.progress-bar::after { content: attr(data-percent) "%"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 0.75rem; font-weight: bold; } - 必须设
position: relative在父容器.progress上，否则::after会相对 body 定位 - IE11 支持
attr()，但只支持字符串属性；数值型属性如data-value="75"也能用，但建议统一用data-percent表意清晰
JavaScript 动态更新时要同步改 data-percent
如果用 JS 控制进度条变化（比如 AJAX 加载中），只改 aria-valuenow 或 style.width，伪元素不会自动刷新——attr() 绑定的是属性值，不是 DOM 属性对象。
- 每次更新进度，必须同时设置：
bar.setAttribute('aria-valuenow', 82); bar.setAttribute('data-percent', 82); - 用
dataset更简洁：bar.dataset.percent = 82;
- 避免用
innerHTML或textContent往进度条里塞文字，会破坏 Bootstrap 的宽度动画逻辑 - 如果用了 Bootstrap 的 JS 插件（如
ProgressBar），它不管理data-percent，得自己补上
字体大小和颜色在深色背景上容易看不清
Bootstrap 默认进度条背景是浅蓝（#0d6efd），文字用白没问题；但若项目用了深色主题或自定义背景色，白色文字可能对比度不足。
立即学习“前端免费学习笔记（深入）”；
- 别硬写
color: white，改用color: currentColor，让文字继承父级文字色，更可控 - 加
text-shadow: 0 1px 2px rgba(0,0,0,0.5)提升可读性，尤其在渐变背景上 - 小屏幕下百分比文字可能溢出，用
font-size: clamp(0.6rem, 0.75vw, 0.875rem)做响应式缩放 - 别忘了给
::after加pointer-events: none，否则会影响鼠标穿透到下方进度条
data-percent 同步、定位上下文、深色适配这三处最容易漏掉。写完记得在移动端真机上看一眼文字是否居中、是否被截断。 
