changing character size with CSS
-
30-09-2019 - |
Question
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.
Solution
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; }
OTHER TIPS
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.
No. You can only target elements (such as a span that contains a single letter) and pseudo-elements (such as :first-letter
).
You can't do this in a cross-browser-consistent and simple way without javascript. I recommend 'captify' for jquery.
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%);