如何通过添加新类名修改元素::before伪元素的样式属性

问题背景 #

我正在开发自定义风格的CSS模板，其中设计了一款悬停填充效果的按钮，初始实现代码如下：

.my-customer-fill-btn {
    width: 100px;
    height: 100px;
    position: relative;
}

.my-customer-fill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: red;
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s ease-in-out;
}

.my-customer-fill-btn:hover::before {
    transform: scaleX(1);
}

.my-customer-testing-border {
    border: 1px solid black;
}

<button class="my-customer-fill-btn my-customer-testing-border"></button>

需求与错误尝试 #

后续需要移除::before伪元素上默认写死的背景色，实现为按钮添加对应颜色类时，可同步修改::before伪元素的background属性，以便在页面中快速创建多款不同配色的填充按钮。
最初的调整代码无法生效，因为直接给颜色类设置background只会作用于按钮本身，不会影响伪元素：

.my-customer-fill-btn {
    position: relative;
    background-color: transparent;
}

.my-customer-fill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 已移除硬编码背景色 */
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s ease-in-out;
}

.my-customer-fill-btn:hover::before {
    transform: scaleX(1);
}

.my-customer-testing-border {
    border: 1px solid black;
}

.size {
  width: 50px;
  height: 50px
}
/* 错误写法：该规则只会修改按钮本身背景，不会作用于::before */
.color {
   background: blue;
}

<button class="my-customer-fill-btn my-customer-testing-border size color"></button>

实现方案 #

伪元素不属于常规DOM节点，无法通过直接给父元素加类的方式继承样式，有两种成熟实现方式： #

方案1：组合选择器匹配对应类下的伪元素 #

直接针对每个颜色类，编写匹配该类按钮::before伪元素的样式规则，写法简单直接，适合颜色数量少的场景：

.my-customer-fill-btn {
    position: relative;
    background-color: transparent;
}

.my-customer-fill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s ease-in-out;
}

.my-customer-fill-btn:hover::before {
    transform: scaleX(1);
}

.my-customer-testing-border {
    border: 1px solid black;
}

.size {
  width: 50px;
  height: 50px
}
/* 正确写法：匹配带color类的按钮的::before伪元素 */
.my-customer-fill-btn.color::before {
   background: blue;
}
/* 可快速扩展其他颜色类 */
.my-customer-fill-btn.color-red::before {
    background: red;
}
.my-customer-fill-btn.color-green::before {
    background: green;
}

使用时直接给按钮加对应颜色类即可：

<!-- 蓝色填充按钮 -->
<button class="my-customer-fill-btn my-customer-testing-border size color"></button>
<!-- 红色填充按钮 -->
<button class="my-customer-fill-btn my-customer-testing-border size color-red"></button>

方案2：CSS自定义属性（推荐，扩展性更强） #

如果需要支持的颜色很多，或者要对接动态主题配置，用CSS变量可以大幅减少重复代码：

.my-customer-fill-btn {
    position: relative;
    background-color: transparent;
    /* 设置伪元素默认背景色 */
    --fill-color: gray;
}

.my-customer-fill-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 读取父元素上的CSS变量 */
    background: var(--fill-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: 1s ease-in-out;
}

.my-customer-fill-btn:hover::before {
    transform: scaleX(1);
}

.my-customer-testing-border {
    border: 1px solid black;
}

.size {
  width: 50px;
  height: 50px
}
/* 颜色类仅需修改变量值即可 */
.color-blue {
   --fill-color: blue;
}
.color-red {
    --fill-color: red;
}
.color-green {
    --fill-color: green;
}

使用方式和常规类一致，也可以直接在内联样式中修改变量，不需要额外写CSS类：

<!-- 蓝色填充按钮 -->
<button class="my-customer-fill-btn my-customer-testing-border size color-blue"></button>
<!-- 直接内联自定义紫色，无需额外写CSS规则 -->
<button class="my-customer-fill-btn my-customer-testing-border size" style="--fill-color: purple"></button>

注意：如果按钮内有文字内容，需要给文字设置position: relative和高于伪元素的z-index值，避免被填充层遮挡。

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