删除基于伪元素的用户交互

Question

如何利用用户与 html 元素的交互来删除伪元素？我有一个带有伪元素的元素，其宽度为 50% 并且绝对定位。我想在用户与其父元素交互后永久删除伪元素。

.test {
  position: relative;
  background: blue;
}

.test::before {
  content: "some text";
  background: red;
  width: 50%;
  position: absolute;
}

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

在父级上使用 :hover、:active 和 :focus 不起作用。谢谢。

Answer 1

虽然有多种方法可以与 JS 中的伪元素进行交互，但在这种情况下，执行您所需操作的更简单的方法是将伪元素与 CSS 类相关联，然后使用 JS 在任何情况下添加/删除/切换该类您需要的活动。

这是该概念的一个有效示例：

const testElement = document.querySelector('.test');

document.querySelector('button').addEventListener('click', e => {
  testElement.classList.toggle('foo');
});

.test {
  color: #FFF;
  position: relative;
  background: #00C;
}

.foo::before {
  content: "some text";
  background: #C00;
  width: 50%;
  position: absolute;
}

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

<button>Click me</button>