css - javascript如何修改伪类？
效果是这样：
代码是这样：
//html
<p class="list-height bottom-line bg-setbacks" data-setbacks="30%">
<p class="dir-row">
<p>线路1</p>
<p class="dir-column"><img src="./images/icon.svg" /><span>冰箱</span></p>
</p>
<p>332</p>
</p>
//关键的css
.bg-setbacks {
position: relative;
}
.bg-setbacks::before {
position: absolute;
content: '';
display: block;
left: 0;
top: 0;
bottom: 0;
background-color: #e4e4e4;
width: 50%;
z-index: -10;
}图里背后的那层灰色阴影，是伪类中的这个属性width: 50%;控制的，但是这个数值需要动态展现，不能写死，于是我参考了这篇文档，通过设置父元素的data-setbacks修改伪类的属性值。
如例：
//html
<p class="test" data-text="TEXT" data-color="red"></p>
//css
.test::before{
content: attr(data-text);
}
//还可以多个类连写
.test::before {
content: '我的类是' attr(class) '想要变成' attr(data-color);
}然而，这个方法貌似只能对伪类的content属性有用，想设置width属性没有任何反应，请问，有什么解决办法？
