Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chang font size only for a single character with CSS

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.

like image 917
Crippletoe Avatar asked Aug 22 '10 13:08

Crippletoe


People also ask

How do you style individual letters in CSS?

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.

Can we use CSS to style one half of a character?

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.


1 Answers

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.

like image 55
Pekka Avatar answered Oct 21 '22 06:10

Pekka