Unexpected behavior of pseudo-elements such as marker

[ChiahongHong]

What version of Tailwind CSS are you using?

For example: v3.3.2

What build tool (or framework if it abstracts the build tool) are you using?

vite 4.3.3, vue 3.2.47, postcss 8.4.23

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

As v3.3.2 is currently unavailable in Tailwind Play, this is the Insiders version.
https://play.tailwindcss.com/3SbW3c1AhG

In v3.3.1, it works as expected.
https://play.tailwindcss.com/1nJxOORQv7

Describe your issue

In v3.3.2, some behaviors of pseudo-elements are not as expected, for example, the marker color cannot be changed correctly, while this works correctly in v3.3.1.

<div class="[&>li]:marker:text-red-500">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</div>

<div class="prose prose-li:marker:text-purple-500">
  <li>D</li>
  <li>E</li>
  <li>F</li>
</div>

[RobinMalfait]

Hey, thank you for this bug report! 🙏

If you swap the variants around then it behaves as expected: https://play.tailwindcss.com/u1trU3XrlL however I do think we regressed on this.

---

@thecrypticace Pinging you because I know you worked on this recently to fix other bugs. We can also pair on this later today to see what's going on if you want.

[thecrypticace]

Hey! Thanks for reporting this! This was something we missed when we re-worked pseudo-element handling to fix some bugs in v3.3.2 — sorry about that!

I've merged the fix in #11111 and it'll be available in the next tagged release. Additionally, it is already available to test via our insiders build: npm install tailwindcss@insiders

Appreciate you bringing this one to our attention! ✨