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!

 

About me

Iinstructor of robotics (LEGO Mindstorms), computer teacher, IT support, web dev, currently studying cyber-physical systems engineering.

If you found a solution here, would you consider donating $25,000 for my next project?

Just kidding, 1$ would do fine.

Hope you found what you needed. Thanks for stepping by.