如何通过JS操作h3::after伪元素，实现悬停时修改其背景色？

核心问题 #

你没法直接用JS操作h3::after这类伪元素——因为伪元素是CSS生成的，不属于DOM节点集合，所以document.getElementsByTagName('h3')[0].style.h3::after.bgColor这种写法完全不生效。

推荐解决方案：CSS变量+JS动态赋值 #

这种方法简洁易维护，步骤如下：

1. 修改CSS，定义伪元素的背景色变量

/* 确保伪元素有content属性才会显示，这里示例加个小方块 */
h3::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  /* 用CSS变量定义背景色，默认值设为你需要的初始颜色 */
  background-color: var(--after-bg, #ccc);
}

2. 重写JS函数，同时修改文本颜色和CSS变量

function kolor(color) {
  // 修改body内所有文本颜色
  document.body.style.color = color;
  // 获取所有h3元素，给每个元素设置CSS变量，同步伪元素背景色
  const allH3 = document.getElementsByTagName('h3');
  for (let h3 of allH3) {
    h3.style.setProperty('--after-bg', color);
  }
}

3. HTML部分保持不变即可

<h3 onmouseover="kolor('#c90000');">Red</h3>
<h3 onmouseover="kolor('#008BCC');">Blue</h3>
<h3 onmouseover="kolor('#fedf00');">Yellow</h3>

额外优化建议 #

如果页面h3元素较多，建议用事件委托代替每个h3绑定onmouseover，减少重复代码：

// 在页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  document.body.addEventListener('mouseover', function(e) {
    if (e.target.tagName === 'H3') {
      // 从h3的自定义属性里取颜色值，更灵活
      const color = e.target.dataset.color;
      kolor(color);
    }
  });
});

对应的HTML改成：

<h3 data-color="#c90000">Red</h3>
<h3 data-color="#008BCC">Blue</h3>
<h3 data-color="#fedf00">Yellow</h3>

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