[css] Make the first character Uppercase in CSS

Is there a way to make the first character Uppercase in a label in CSS.

Here is my HTML:

_x000D_
_x000D_
<a class="m_title" href="">gorr</a>_x000D_
<a class="m_title" href="">trro</a>_x000D_
<a class="m_title" href="">krro</a>_x000D_
<a class="m_title" href="">yrro</a>_x000D_
<a class="m_title" href="">gwwr</a>
_x000D_
_x000D_
_x000D_

This question is related to css

The answer is


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}

I suggest to use

#selector {
    text-transform: capitalize;
}

or

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

By the way, check this w3schools link: http://www.w3schools.com/cssref/pr_text_text-transform.asp


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.


CSS :first-letter Selector

or :

text-transform: capitalize;

I would recommend that you use the following code in CSS:

    text-transform:uppercase; 

Make sure you put it in your class.


<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>