How to text transform capitalize an uppercased text

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 !

0