CSS进度条宽度由内联样式设置，未应用

Question

我的CSS进度条渲染除内联样式之外的所有内容，因此进度内容的大小不会按预期动态变化。 {{ field_ct_rack_left_pdu__value }} 的值是从 Drupal 视图推送的。

这是 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;
 }

当我在 .iab-progress-bar::before 选择器中使用 width: 属性时，栏会按预期扩展。

数据标签属性包含正确的值。

我尝试过使用 width: 选择器中的 data-label 属性，但当然我没有成功。

感谢您的时间和想法。

Answer 1

尝试这样

HTML：

<div class= "iab-progress-bar">
<div class="iab-progress-bar_Fill" data-label="20%" style="width:20%" 
</div></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_Fill{
content: attr(data-label);
display: flex;
align-items: center;
position: absolute;
left: .5em;
top: .5em;
bottom: .5em;  
min-width: 2rem;
max-width: calc(100% - 1em);
background-color: #fc7703;
border-radius: 1em;
padding: 1em;
}

现在它可以在更改值时动态工作