如何在 CSS 中使用 active 和 before？

Question

我会使用伪 class ::before :active 创建 CSS 的效果。我创建了一个效果，如果你点击之前的p元素，p之前的内容会发生变化。我认为那是行不通的，因为之前 p 不能是 select.
这是我的代码，但不起作用：

.container {
  background-color: #222;
  border-radius: 5px;
  width: 200px;
  display: block;
  margin: 0 auto;
}

.container > p {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.container > p::before {
  content: 'ON';
}

p:active + p:before {
  content: 'OFF';
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container"><p></p></div>
</body>
</html>

Answer 1

p:active + p:before表示出现在紧接在鼠标指向的（其他）段落之后的段落之前的伪元素按下鼠标按钮时。

由于您只有一个段落，因此无法匹配任何内容。

也许你的意思是 p:active:before？

.container {
  background-color: #222;
  border-radius: 5px;
  width: 200px;
  display: block;
  margin: 0 auto;
}

.container > p {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.container > p::before {
  content: 'ON';
}

p:active:before {
  content: 'OFF';
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container"><p></p></div>
</body>
</html>

Answer 2

将此规则 p:active + p:before 更改为 p:active:before

.container {
  background-color: #222;
  border-radius: 5px;
  width: 200px;
  display: block;
  margin: 0 auto;
}

.container > p {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.container > p::before {
  content: 'ON';
}

p:active:before {
  content: 'OFF';
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container"><p></p></div>
</body>
</html>

如何在 CSS 中使用 active 和 before？

How to use active and before with CSS?

html

css

pseudo-class