Using CSS pseudo-element "first-letter"

nminchin · November 11, 2020, 6:32pm

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:
http://jsfiddle.net/ckdazgm8/

PGriffith · November 11, 2020, 7:01pm

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.

nminchin · November 11, 2020, 7:12pm

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...

Thanks for the prompt!