Lower case all then capitalize - pure CSS

capitalize css

Noitidart · Feb 17, 2014 · Viewed 23.2k times · Source

I saw this topic here: First lowercase the text then capitalize it. Is it possible with CSS?

But it wasn't pure CSS. I have a div that contains this text:

<div>
RaWr rAwR
</div>

I want to use css to make it look like "Rawr Rawr". Cut if I just to text-transform capitalize it makes it "RaWr RAwR", the already uppercase letters remain upper case. So I need to lower case it all first then capitalize, is the solution to wrap it in a div?

I tried wrapping it in another div but it didnt work:

<style>
    #test3 { text-transform: lowercase; }
    #test3 div { text-transform: capitalize; }
</style>

<div id="test3"><div>RaWr rAwR</div></div>

Answer

This should do it when you have the single words in different div's

#test3 { text-transform: lowercase; }

#test3::first-letter { text-transform: uppercase; }


<div id="test3">haLLo</div>

Lower case all then capitalize - pure CSS

Answer

Related questions