CSS: Make only first letter uppercase (capital letter), use ::first-letter

 first letter uppercase css

Ever needed to make only the first letter of a sentence, element or just a read more button uppercase and not the all words that are present in that element that the text-transform: capitalize; will do? 

Worry no more. Here is a simple answer. 

To make ONLY THE FIRST LETTER UPPERCASE with CSS in an element, you need to use ::first-letter pseudo element. 

How to make the first letter uppercase only with CSS?

Let’s say your div has a class .more-link (a WordPress more link) that has a “read more” from your theme (i.e. Divi theme posts block) with lowercase letters in it. You will need to add to the custom CSS lines like this. 

.more-link {

your styles here

}

.more-link::first-letter {

text-transform: uppercase;

}

 

This will make only the first letter in your element (sentence, block of words etc) UPPERCASE.

 

Hope this helps!

 

Post Author: Tom Pai