How Can I Capitalize Only the First Letter of Words While Preserving All Caps Text in CSS?

CSS text-transform: Capitalize on All Caps

In this scenario, applying the text-transform: capitalize property to elements with upper or lowercase text results in the desired capitalization for lowercase words. However, the problem arises with all-caps text, where the desired outcome is to preserve the capitalization.

To address this challenge, a CSS solution can be implemented using a combination of the text-transform: lowercase and text-transform: uppercase properties, along with the :first-letter and :first-line pseudo-classes.

Here's the updated CSS:

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

This combination transforms all text to lowercase while preserving the initial letter's capitalization. By applying this style to the a elements in the HTML provided, you can achieve the desired output of:

Small Caps & All Caps

The above is the detailed content of How Can I Capitalize Only the First Letter of Words While Preserving All Caps Text in CSS?. For more information, please follow other related articles on the PHP Chinese website!