CSS ::after with plus(+) 选择器的样式

Question

我想在检查输入时为 ::after 添加一些 CSS 样式。
例如，我想将 'A' 的颜色从 red 更改为 blue。

我尝试了什么：

.container::after {
  content: 'A';
  color: red;
}

.container>input:checked+ ::after {
  color: blue;
}

<label class="container">
  <input type="checkbox" />
</label>

并且：

.container::after {
  content: 'A';
  color: red;
}

.container>input:checked+.container::after {
  color: blue;
}

<label class="container">
  <input type="checkbox" />
</label>

如有任何帮助，我们将不胜感激。
谢谢！

编辑：
我不想从子修改父样式！
::after 在父级内部。沿着输入。
他们是兄妹。

您可以为容器设置以下样式，它们会影响::after。因为它在容器内。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer 1

这在纯 CSS 中是不可能的。

在这个答案的接受版本中，我完全错了这个原因！我一直假设 ::after 伪元素放在元素之后——因此，你知道这个名字——但显然多年来我一直错了； ::before 和 ::after 伪元素实际上是 first and last children of the main element。非常感谢@MRNafisiA 在评论中指出这一点！

除了不是真的，因为它们仍然没有被视为 DOM 的一部分。兄弟选择器不能用于匹配伪元素，它们不会包含在通常匹配子元素（first-child、last-child 等）的任何其他选择器中。

所以你能得到的最接近的可能是 input:checked::after {}（尽管需要一些额外的布局摆弄才能通过那种零宽度复选框。）

label {display: block}

input::after {
  content: "A";
  color: red;
  margin-left: 1.2em;
}

input:checked::after {
  color: blue
}

<label><input type="checkbox"></label>
<label><input type="checkbox"></label>
<label><input type="checkbox"></label>

CSS ::after with plus(+) 选择器的样式

CSS style for ::after with plus(+) selector

html

css

css-selectors

pseudo-element