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.
In order to style something in CSS, you need a selector to target it. If you're going to style individual letters, you need to wrap each one in an HTML element so that you can then select it in CSS.
The CSS style can be set to a character in vertically half or horizontally half both. Add a class on the text and the class contains CSS style to apply half of the character. The accessibility of the main text is preserved with screen readers for the blind or visually impaired.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With