Using CSS pseudo-element "first-letter"

I’m trying to use the css pseudo-element ::first-letter to set the first letter of a sentence to capital, but I’m struggling to get it working…

I added a class into my css theme and it’s showing up in dev tools:

But the text in my span isn’t having the style applied (I added font-size to make it obvious, because at the moment i’m not setting the rest of the sentence to lowercase - will do that after I prove the pseudo-element works)

I’ve proved that this works in jfiddle inside multiple divs and a span:

Check the style information on the <span> element itself - it’s likely not inheriting from the outer div. Unfortunately, if that’s the case, I don’t think there’s really any workaround using the label component.

I swapped over to the Markdown component (I really need to remember about that!) and BAM! Although I still couldn’t see the pseudo-effect attached to the span… I did however see that the style class was attached to it. I’m still figuring out how all this works still… so I’m probably misunderstanding something, or everything… :sweat_smile:


Thanks for the prompt!