javascript如何修改伪类？

效果是这样：

代码是这样：

//html
<div class="list-height bottom-line bg-setbacks" data-setbacks="30%">
    <div class="dir-row">
        <div>线路1</div>
        <div class="dir-column"><img src="./images/icon.svg" /><span>冰箱</span></div>
    </div>
    <div>332</div>
</div>


//关键的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
<div class="test" data-text="TEXT" data-color="red"></div>


//css
.test::before{
    content: attr(data-text);
}
//还可以多个类连写
.test::before {
  content: '我的类是' attr(class) '想要变成' attr(data-color);
}

然而，这个方法貌似只能对伪类的content属性有用，想设置width属性没有任何反应，请问，有什么解决办法？

---

js改伪类属性这种事情，不用这么多奇淫技巧，你换个思路，在css多写一个带伪类的class选择器，然后把元素换个class不就行了吗？

---

使用insertRule方法应该可以修改样式insertRule