为:after、:before伪元素设置不同配色方案的实现需求

嘿，这事儿其实很简单，咱们用CSS的类组合选择器就能实现你要的效果——给.box加个颜色类（比如.red、.green），就能精准切换:before和:after的背景色。具体步骤如下：

1. 保留基础.box样式 #

先把你原有的.box基础样式放好，同时给伪元素设置一个默认背景色（作为 fallback）：

.box {
  display: inline-block;
  position: relative;
  clear: both;
  padding: 14px 0 10px 27px;
  height: 20px;
  width: 15%;
  text-align: center;
  color: white;
  font-size: 14px;
  font-weight: bold;
  vertical-align: middle; /* 补全你未写完的垂直对齐属性 */
}

/* 伪元素的基础布局+默认背景色 */
.box::before,
.box::after {
  content: "";
  position: absolute;
  /* 这里放你原有的transform、宽高之类的布局代码 */
  background-color: #666; /* 默认灰色，可按需调整 */
}

2. 编写颜色类的覆盖样式 #

接下来，给不同颜色主题写对应的组合选择器——因为.box.red::before的优先级比单纯的.box::before更高，所以会自动覆盖默认样式：

/* 红色主题：修改两个伪元素的背景色 */
.box.red::before,
.box.red::after {
  background-color: #ff3333;
}

/* 绿色主题：修改两个伪元素的背景色 */
.box.green::before,
.box.green::after {
  background-color: #2ecc71;
}

3. HTML中直接使用多类名 #

在HTML元素上同时添加.box和颜色类即可，用法非常直观：

<div class="box red">红色标签</div>
<div class="box green">绿色标签</div>
<div class="box">默认灰色标签</div>

进阶：单独修改某一个伪元素 #

如果你想单独调整:before或:after的颜色，只需要拆分选择器就行，比如：

/* 只给.red类的:before改色，:after保持默认 */
.box.red::before {
  background-color: #ff3333;
}

这样不管你要新增多少种颜色主题，只需要添加对应的.box.xxx::before/::after样式即可，完全不用改动基础的.box代码，扩展性拉满~

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