The ::after selector not working with certain classes in the element

I have a SPAN element ::after which I want to display a collapse state indicator - closed=">" or open="V".

I am toggling the SPAN's classes "catopac-open" and "catopac-closed" (using JQuery) when the collapse state changes - the class change is working fine. There are other classes in the SPAN.

Here's the SPAN element:

<span  id="catopac-collapse-char" class="catopac-collapse-char catopac-float-right catopac-closed"></span>

My CSS looks like this:

.catopac-collapse-char.catopac-float-right.catopac-closed::after {
content: ">";}

and

.catopac-collapse-char.catopac-float-right.catopac-open::after {
content: "V";}

The collapse state indicator displays for only one of the states (open or closed), depending which order I have the CSS entries - the first CSS entry works, the second doesn't. It is not dependent on the initial state of the classes.

Using Dev tools (chrome), I can see that the classes change as expected, but the ::after pseudo-element is not present for the non-functioning state:

I found a demo of the CSS content property which I adapted to mimic what I am doing, and this works fine: working demo of CSS content

I cannot see what is functionally different between my code and the demo. Any help would be appreciated.

David