I have a really short trick for today, something that I encountered lately in my day job. If you have a text set by the backend guys and it is in uppercase but you need only the first letter to be uppercase the text-transform: capitalize won’t help you because when applied to a text that is all uppercased it won’t turn the rest of the letters beside the first one to lowercase.

So the trick is the following: We will apply first a lowercase text transformation to the text and target the first-letter pseudo element and turn it to uppercase.

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

Try it out ! See you at the next article !

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Categorized in: