Why Doesn\'t `text-transform: capitalize` Work on All-Caps Text?

To resolve this issue, a slightly modified CSS approach can be adopted:

.link {
  text-transform: lowercase;
}

.link:first-letter,
.link:first-line {
  text-transform: uppercase;
}

This CSS code employs the following techniques:

• text-transform: lowercase;: Converts all text within the .link elements to lowercase.
• text-transform: uppercase; applied to :first-letter and :first-line selectively capitalizes the first letter of each word and the first line of the text, respectively.

By applying these styles, the desired output is achieved:

Small Caps
All Caps

The above is the detailed content of Why Doesn\'t `text-transform: capitalize` Work on All-Caps Text?. For more information, please follow other related articles on the PHP Chinese website!