CSS进度条内联样式width不生效问题求助

我的CSS进度条其他内容渲染正常，但内联样式的width没生效，导致进度条不能按预期动态变化。{{ field_ct_rack_left_pdu__value }}的值由Drupal View传入，data-label能正确获取到数值，但用内联width控制进度条的方法失效了。手动给.iab-progress-bar::before设置固定width时，进度条能正常扩展。

HTML代码 #

<div class="iab-progress-bar" data-label="{{ field_ct_rack_left_pdu__value }}%" style="width:{{ field_ct_rack_left_pdu__value }}%"></div>

CSS代码 #

.iab-progress-bar {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 3em;
  background-color: #111;
  border-radius:1em;
  color: white;
  margin-bottom:10px;
}

.iab-progress-bar::before {
  content: attr(data-label);
  display: flex;
  align-items: center;
  position: absolute;
  left: .5em;
  top: .5em;
  bottom: .5em;  
  /*width:3%;*/
  min-width: 2rem;
  max-width: calc(100% - 1em);
  background-color: #fc7703;
  border-radius: 1em;
  padding: 1em;
}

解决思路 #

• 问题核心：你把width内联样式加在了父元素.iab-progress-bar上，但进度条的彩色填充部分是伪元素::before，父元素的width设置不会直接传递给伪元素；而且父元素本身CSS已经定义了width:100%，内联width会被这个规则覆盖（父元素本来就该是100%宽度作为进度条容器）。

方案1：用CSS变量传递动态值（推荐） #

1. 修改HTML，把进度值存在CSS变量里：

   <div class="iab-progress-bar" data-label="{{ field_ct_rack_left_pdu__value }}%" style="--progress-width:{{ field_ct_rack_left_pdu__value }}%"></div>
   

2. 在CSS伪元素中引用这个变量：

   .iab-progress-bar::before {
     /* 保留原有样式 */
     width: var(--progress-width, 0%); /* 0%为默认值，防止数值为空时出错 */
   }
   

   这样伪元素就能直接拿到动态传递的宽度，父元素保持100%宽度作为容器，逻辑更清晰。

方案2：利用data属性结合attr()函数 #

1. 调整HTML，给单独的data属性存纯数字值：

   <div class="iab-progress-bar" data-progress="{{ field_ct_rack_left_pdu__value }}" data-label="{{ field_ct_rack_left_pdu__value }}%"></div>
   

2. 在伪元素中使用attr()获取数值并拼接单位：

   .iab-progress-bar::before {
     /* 保留原有样式 */
     width: attr(data-progress)%;
   }
   

   注意：部分旧浏览器对attr()用于非content属性的支持有限，优先选CSS变量方案更稳妥。

额外检查项 #

• 确认Drupal传递的{{ field_ct_rack_left_pdu__value }}是纯数字（比如75而非75%），避免重复加%导致样式解析失败。
• 打开浏览器控制台的元素面板，检查内联样式是否正确渲染，有没有被其他CSS规则强制覆盖。

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