CSS Capitalize First Letter In All Caps Word

Question

Is it possible to capitalize the first letter only of a word that is all caps using CSS?

So change "TESTING" to "Testing"?

<span class = "capitalize">TESTING</span>

The css property text-transform: capitalize doesn't work (capitalizes the first letter but ignores the rest).

Answer 1

Yes it is possible with just CSS, here's how:

.capitalize {
  text-transform: lowercase;
  display: inline-block;
}

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

<span class = "capitalize">TESTING</span>

You'll notice I added display:inline-block, this is because:

"A first line has meaning only in a block-container box, therefore the ::first-letter pseudo-element has an effect only on elements with a display value of block, inline-block, table-cell, list-item or table-caption." source