Make the first character Uppercase in CSS

ID : 10257

viewed : 18

Tags : csscss

Top 5 Answer for Make the first character Uppercase in CSS

vote vote


There's a property for that:

a.m_title {     text-transform: capitalize; } 

If your links can contain multiple words and you only want the first letter of the first word to be uppercase, use :first-letter with a different transform instead (although it doesn't really matter). Note that in order for :first-letter to work your a elements need to be block containers (which can be display: block, display: inline-block, or any of a variety of other combinations of one or more properties):

a.m_title {     display: block; }  a.m_title:first-letter {     text-transform: uppercase; } 
vote vote


Note that the ::first-letter selector does not work with inline elements, so it must be either block or inline-block, as follows:

.m_title {display:inline-block} .m_title:first-letter {text-transform: uppercase} 
vote vote


CSS :first-letter Selector


text-transform: capitalize; 
vote vote


Make it lowercase first:

.m_title {text-transform: lowercase} 

Then make it the first letter uppercase:

.m_title:first-letter {text-transform: uppercase} 

"text-transform: capitalize" works for a word; but if you want to use for sentences this solution is perfect.


.m_title {   display: inline-block; /* Thanks to Fanky ( */      text-transform: lowercase }  .m_title:first-letter {   text-transform: uppercase }
<a class="m_title" href="">gorr</a> <a class="m_title" href="">trro</a> <a class="m_title" href="">krro</a> <a class="m_title" href="">yrro</a> <a class="m_title" href="">gwwr</a>

vote vote


I suggest to use

#selector {     text-transform: capitalize; } 


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

By the way, check this w3schools link:

Top 3 video Explaining Make the first character Uppercase in CSS