本文旨在讲解如何通过添加或修改CSS类来动态改变元素的::before伪元素的样式。通过合理的CSS结构和选择器，我们可以实现灵活的样式控制，避免为每个按钮单独编写CSS代码，从而提高代码的可维护性和可重用性。
核心思路：利用CSS选择器特性
关键在于正确地使用CSS选择器，将样式规则应用于特定的伪元素。直接对.color类应用::before伪元素样式并不能直接生效，因为.color本身是应用在button元素上的，我们需要一种方式来关联.color和::before。
正确的做法是利用CSS的层叠性和选择器优先级，结合类名和伪元素选择器，来达到修改::before样式的目的。
实现方法
以下是修改后的CSS代码：
立即学习“前端免费学习笔记（深入）”；
.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%;
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;
}
.size {
width: 50px;
height: 50px
}
/* 当元素同时拥有 .my-customer-fill-btn 和 .color 类时，修改 ::before 的背景色 */
.my-customer-fill-btn.color::before {
background: blue;
}对应的HTML代码：
<button class="my-customer-fill-btn my-customer-testing-border size color"></button>
解释:
- .my-customer-fill-btn::before：定义了::before伪元素的默认样式，包括初始的红色背景色。
- .my-customer-fill-btn.color::before：这是一个更具体的选择器，它选择同时拥有.my-customer-fill-btn和.color类的元素的::before伪元素。由于其选择器优先级更高，因此会覆盖默认的背景色。
工作原理:
当button元素同时拥有.my-customer-fill-btn和.color类时，.my-customer-fill-btn.color::before选择器会生效，将::before的背景色设置为蓝色。如果button元素没有.color类，则::before的背景色将保持为默认的红色。
扩展与应用
此方法可以扩展到更多的样式属性。例如，你可以创建不同的类来改变::before的宽度、高度、透明度等。
.my-customer-fill-btn.small::before {
width: 50%;
}
.my-customer-fill-btn.transparent::before {
opacity: 0.5;
}<button class="my-customer-fill-btn my-customer-testing-border size color small transparent"></button>
注意事项
- 确保你的CSS选择器具有足够的特异性，以覆盖默认样式。
- 合理利用CSS的层叠性和优先级，避免样式冲突。
- 使用开发者工具检查元素的样式，确认样式是否正确应用。
总结
通过结合类名和伪元素选择器，我们可以灵活地控制::before伪元素的样式，实现动态的样式变化。这种方法可以提高代码的可维护性和可重用性，避免为每个元素单独编写CSS代码。在实际开发中，可以根据具体需求扩展此方法，实现更复杂的样式效果。
