changing character size with CSS

Question

Hi.

Is it possible to change the size of a specific character using CSS?

For example, in a paragraph I am using font-face: Arial; font-size: 12pt;. I would like that only the letter "a" would appear in size 10.

Is there a way to do that?

Thanks.

Answer 1

No. You can only target elements (such as a span that contains a single letter) and pseudo-elements (such as :first-letter).

Answer 2

No. Except for :first-letter and other pseudo-classes, you can't target single characters using CSS. You'd need to wrap the character into an element (e.g. a <span>) to specify a style for it.

You can work around this using Javascript - there are jQuery based solutions for this here on SO. But it's kludgy.

Answer 3

I don't believe you can, consider using a text editor to do a find/replace 'a' with <span class='a-xxx'>a</span> and then you can use css to do .a-xxx { font-size: 10px; }

Answer 4

You can't do this in a cross-browser-consistent and simple way without javascript. I recommend 'captify' for jquery.

Answer 5

Also for accessibility and compatibility and all that it is best not to define specific fonts (try font-family) and sizes in terms of large, larger then use % ontop of that, and define them all as custom span/div styles

e.g

bigletter (font-size:150%);