Capitalizing only first letter with CSS

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>
		

CSS:

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

You can find the complete example here: codepen.io/xhuljan123/pen/rNMvwjG