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() 安全读取并拼接。这是最轻量、兼容性最好的做法。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 在 <div class="progress-bar"> 上加 <code>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 同步、定位上下文、深色适配这三处最容易漏掉。写完记得在移动端真机上看一眼文字是否居中、是否被截断。