如何通过CSS从元素属性动态设置::before/::after的宽高？

我们知道元素的::before伪元素可通过同元素的字符串属性生成内容，示例如下：

HTML代码：

<div class="progress">
   <span class="percentage" data-percentage="24%"></span>
</div>

CSS代码：

.progress > .percentage::before {
  content: attr(data-percentage);
  /* 其他样式 */
}

但能否通过CSS从元素属性动态设置宽度或高度？尝试的CSS代码如下：

.progress > .percentage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 1rem;
  width: attr(data-percentage);
  background: red;
}

已知该问题可通过JavaScript解决，请问是否存在纯CSS实现方案？

是存在纯CSS实现方式的，主要有两种可行思路：

1. 带类型参数的attr()函数 #

CSS的attr()函数现在支持指定返回值类型，针对width、height这类长度属性，用attr(属性名 类型)的写法就能直接把属性值解析为合法的长度单位。

修改后的CSS代码如下：

.progress {
  position: relative;
  /* 给父元素加相对定位，确保伪元素的绝对定位生效 */
}
.progress > .percentage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 1rem;
  width: attr(data-percentage length);
  background: red;
}

注意：这种写法的浏览器兼容性需要留意，目前Chrome 88+、Firefox 77+等现代浏览器已支持，老旧浏览器可能无法兼容。

2. 结合CSS自定义属性（变量） #

这是兼容性更好的方案，先把元素的data-percentage属性值赋值给CSS变量，再在样式里引用这个变量：

HTML代码保持不变，修改CSS为：

.progress {
  position: relative;
}
/* 将data属性值赋值给CSS变量 */
.progress > .percentage {
  --percent: attr(data-percentage);
}
.progress > .percentage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 1rem;
  width: var(--percent);
  background: red;
}

这种方式兼容大部分主流浏览器，适用场景更广。

另外补充：如果data-percentage的属性值是纯数字（比如24而非24%），可以用calc()函数转换成百分比，写法为width: calc(var(--percent) * 1%);。

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