Is there a way to target all the instances of a specific character using CSS?

Question

I have a client who wants to use a script font (Better Personality Script) for dropcaps. This is problematic, because ten of the font's uppercase letters are different widths, and are positioned differently on their baselines than the rest of the font.

I would like to be able to write CSS that provides specific rules for when each of those ten uppercase letters appears within the .drop-cap class. Is this possible?

Answer 1

There is no way to target uppercase characters to style them differently unless each is wrapped in its own element (a span would work well for that). Of course, that's going to be a very manual process.

You can applytext-transform to your .drop-cap class but you would only be changing the visual to not show uppercase letters. You can't actually style uppercase letters differently.