如何通过内联样式为HTML标签直接设置::after伪元素的宽度？

你没法直接通过元素的style属性设置伪元素（比如::after）的样式，因为伪元素不属于DOM元素本身，style属性只作用于当前元素。不过有两种简单的方法可以实现你的需求：

方法1：使用CSS自定义属性（推荐） #

修改你的CSS代码，用自定义变量来控制伪元素的宽度：

.progress{
    position: relative;
    height: 100%;
}
.progress::after{
    content: '\A';
    position: absolute;
    background: rgba(200, 200, 200, 0.5);
    top: 0; bottom: 0;
    left: 0; 
    width: var(--progress-width, 50%); /* 50%是默认宽度 */
}

然后在HTML的style属性中定义这个变量的值，就能单独控制每个.progress元素的伪元素宽度：

<!-- 宽度30% -->
<div class="progress" style="--progress-width: 30%;"></div>
<!-- 宽度75% -->
<div class="progress" style="--progress-width: 75%;"></div>

这个方法兼容性好，写法简洁，完全符合你想在标签上直接设置的需求。

方法2：使用data属性 #

给每个.progress元素添加自定义data属性，然后在CSS中读取这个属性值：

.progress{
    position: relative;
    height: 100%;
}
.progress::after{
    content: '\A';
    position: absolute;
    background: rgba(200, 200, 200, 0.5);
    top: 0; bottom: 0;
    left: 0; 
    width: attr(data-progress-width %); /* 读取data属性的值作为百分比 */
}

对应的HTML写法：

<!-- 宽度40% -->
<div class="progress" data-progress-width="40"></div>
<!-- 宽度85% -->
<div class="progress" data-progress-width="85"></div>

注意：attr()函数在处理百分比单位时，部分老浏览器可能存在兼容性问题，所以优先推荐方法1。

内容的提问来源于stack exchange，提问作者KimGyeongMin-KR