如何通过点击标题修改CSS伪元素的背景颜色？

伪元素（如:before）不属于真实DOM节点，无法通过jQuery直接选中并修改它的样式。你可以通过给父元素添加/移除类的方式间接控制伪元素样式，这是处理伪元素样式动态变化的标准方案。

具体实现步骤： #

• 点击标题时，给伪元素的父容器.main__heading添加自定义类（比如.active）
• 在CSS中定义该类下伪元素的目标样式

完整代码示例： #

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="padding">
  <div class="main__heading">
    <h1 type="button" id="main">Heading Text</h1>
  </div>
</div>

CSS

.padding {
  border  : 1px solid red;
  padding : 40px;
}
#main:hover {
  cursor : pointer;
}
.main__heading:before {
  align-items      : baseline;
  background-color : green;
  content          : "";
  display          : flex;
  height           : 5px;
  left             : 0;
  top              : 0;
  width            : 70px;
}
/* 激活类对应的伪元素样式 */
.main__heading.active:before {
  background-color: red;
}

JavaScript

jQuery(function() {
  changeColor();
});

function changeColor() {
  $('#main').on("click", function() {
    // 给父元素添加激活类（如需切换颜色，改用toggleClass）
    $('.main__heading').addClass('active');
    // 若要实现点击切换红绿状态，替换为：
    // $('.main__heading').toggleClass('active');
  })
}

补充说明： #

如果需要点击切换颜色（点一次变红，再点恢复绿色），将addClass替换为toggleClass即可，每次点击会切换父元素的.active类，伪元素颜色也会随之切换。

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