Capitalizing only first letter with CSS

By xhuljan 08 January 2021 1.6K 0

There is a CSS property called text-transform that controls the capitalization of text.

Setting the value of text-transform: uppercase will make all characters uppercase and this is not what we need. In this case we can use ::first-letter selector to apply uppercase only to our first letter.

HTML code:

		<div class="capitalize-first-letter">ONLY FIRST LETTER WILL BE CAPITALIZED</div>


		.capitalize-first-letter {
	text-transform: lowercase;
.capitalize-first-letter::first-letter {
	text-transform: uppercase;

You can find the complete example here: