Is there a way to select the first character? :first-letter does not seem to work [duplicate]

Question

Example problem: http://jsfiddle.net/6WYXk/

I have some html: <p>% hello world</p>

I want to make the % bold. To do this usually I would write this in CSS:

p:first-letter
{
    font-weight: bold;
}​

However that makes the % and the h bold.

Ideally I'd like a psudeo selector of :first-character

Answer 1

Indeed, that's odd. Doesn't work for other symbol chars as well and the same problem has been discussed elsewhere on SO as well.

You should try something like this:

<p>hello world</p>

p:before { content:"%"; font-weight: bold; padding-right: 5px;}

​ Try it yourself…

Answer 2

Your can write like this:

<p><span>%</span> hello world</p>

Check this http://jsfiddle.net/6WYXk/30/