How to Capitalize first letter only using CSS in each case

Kabir picture Kabir · Jul 3, 2013 · Viewed 57.3k times · Source

I want to Capitalize first letter only and other should be small using CSS

String is:

SOMETHING BETTER 
sOMETHING bETTER
Something better

but the result should be

Something Better

Is this possible using CSS? To Capitalize first letter I am using

text-transform: capitalize;

But not able to capitalize in each case. "I want to use CSS because in my application it has written every where hard coded but a class has been called everywhere."

Answer

mzmm56 picture mzmm56 · Jul 3, 2013

you should be able to use the :first-letter pseudo element:

.fl {
 display: inline-block;
}

.fl:first-letter {
 text-transform:uppercase;
}

<p>
 <span class="fl">something</span> <span class="fl">better</span>
</p>

yields:

Something Better