Make the first character Uppercase in CSS

Css

Css Problem Overview

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

Here is my HTML:

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

Css Solutions

Solution 1 - Css

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;
}

Solution 2 - Css

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}

Solution 3 - Css

CSS :first-letter Selector

or:

text-transform: capitalize;

Solution 4 - Css

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.

Example: 

.m_title {
  display: inline-block; /* Thanks to Fanky (https://stackoverflow.com/users/2095642/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>

Solution 5 - Css

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

Solution 6 - Css

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

Solution 7 - Css

Works in React Native too:

    textTransform: 'capitalize'

Solution 8 - Css

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

    text-transform:uppercase;

Make sure you put it in your class.

Categories
Recommended Css Solutions

Previous Solution:

What is a "thread" (really)?

MultithreadingProcessDefinition

Next Solution:

Can I run HTML files directly from GitHub, instead of just viewing their source?

JavascriptHtmlGithub

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionenjoylifeView Question on Stackoverflow
Solution 1 - CssBoltClockView Answer on Stackoverflow
Solution 2 - CssLogus GraphicsView Answer on Stackoverflow
Solution 3 - CssAmr ElgarhyView Answer on Stackoverflow
Solution 4 - CssOzgurGView Answer on Stackoverflow
Solution 5 - CssMaurizio BattaghiniView Answer on Stackoverflow
Solution 6 - CssGnana SekarView Answer on Stackoverflow
Solution 7 - CssSeñor BenView Answer on Stackoverflow
Solution 8 - CssKevin DavisView Answer on Stackoverflow