如何通过用户交互移除HTML元素的伪元素？

:hover/:active/:focus这类伪类都是临时状态，交互结束后会自动恢复，所以没法实现永久移除的需求。我们可以用JavaScript给父元素添加一个自定义类，再通过CSS针对这个类隐藏伪元素，这样就能实现交互后永久移除的效果。

具体实现步骤： #

1. 修改CSS：新增一个自定义类（比如.pseudo-removed），给这个类下的伪元素设置content: none（这是彻底移除伪元素的最直接方式，比display: none更彻底）：

.test {
  position: relative;
  background: blue;
  padding: 20px; /* 加内边距避免伪元素覆盖文本 */
  color: #fff;
}

.test::before {
  content: "some text";
  background: red;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px;
}

/* 新增类：移除伪元素 */
.test.pseudo-removed::before {
  content: none;
}

2. 添加JavaScript：监听用户的交互事件（比如点击），给目标元素加上这个类：

const testElement = document.querySelector('.test');
testElement.addEventListener('click', () => {
  testElement.classList.add('pseudo-removed');
});

3. HTML保持原有结构：

<div class="test">Lorem ipsum dolor sit.</div>

可选调整： #

• 如果需要其他触发逻辑（比如鼠标松开、触摸屏幕），可以把click事件换成mouseup、touchstart等；
• 如果需要支持「点击移除/再次点击恢复」的切换效果，把classList.add换成classList.toggle即可。

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