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

Question

I want to add some CSS style for ::after when the input is checked.
For example, I want to change the color of 'A' from red to blue.

What I tried:

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

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

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

And:

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

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

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

Any help would be appreciated.
Thanks!

Edit:
I don't want to modify parent style from the child!
::after is inside the parent. Right along the input.
They're siblings.

You can set below styles for container and they affects the ::after. because it's INSIDE the container.

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

This isn't going to be possible in pure CSS; you're trying to have a child element (the input) modify the style of a parent element (container::after). That's not what the plus selector (or any other selector!) does -- `+` means the following sibling element, not child. The closest you can get is probably `input:checked::after {}` — Daniel Beck, Nov 11 '21 at 20:08
`.container::after` is not inside the `.container`. It's after it. That's why they call it that. — Daniel Beck, Nov 11 '21 at 20:21
I reopened, but I think the duplicate was valid for the reasons Daniel Beck stated: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?rq=1 — isherwood, Nov 11 '21 at 20:21
According to MDN. It's a child. https://developer.mozilla.org/en-US/docs/Web/CSS/::after — MRNafisiA, Nov 11 '21 at 20:45
Holy cow, you're right @MRNafisiA! I had no idea, thank you for pointing to that! I've corrected my answer below — Daniel Beck, Nov 11 '21 at 21:43
You're very welcome. I tried all :first-child, :last-child, ~ *, ~ *::after, ~ *::before selectors, but none of them worked. They're element children but don't act like them completely. After trying these I accepted your answer and changed my html to handle the problem with different approach. — MRNafisiA, Nov 12 '21 at 07:54
See my answer to [Can I target a :before or :after pseudo-element with a sibling combinator?](https://stackoverflow.com/questions/7735267/can-i-target-a-before-or-after-pseudo-element-with-a-sibling-combinator) — BoltClock, Nov 14 '21 at 15:33

Daniel Beck · Accepted Answer · 2021-11-11T21:43:00.690

This isn't going to be possible in pure CSS.

In the accepted version of this answer I was entirely wrong about the reason for this! I've always assumed that the ::after pseudo-element was placed after the element -- hence, y'know, the name -- but apparently I've been wrong about that for years; the ::before and ::after pseudo-elements are actually first and last children of the main element. Many thanks to @MRNafisiA for pointing this out in comments!

Except not really, because they're still not treated as part of the DOM. Sibling selectors can not be used to match pseudo-elements, and they will not be included in any other selectors that would normally match child elements (first-child, last-child, etc).

So the closest you can get is probably input:checked::after {} (though some extra layout fiddling is necessary to get past the sort-of-zero-width checkbox.)

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 style for ::after with plus(+) selector

1 Answers1