How to color the asterix first character in a p tag

Question

I thought this would be easy using the ::first-letter pseudo element but it doesn't work!

I have

<p>* Required Fields</p>

and I want the * to be red!

Any ideas? Note I can't change the html.

http://jsfiddle.net/3ducS/

Answer 1

I almost have a solution (well, you might see it as a solution) and it works with your HTML :

p::before {
    content:'*';
    position:absolute;
    color: red;
    text-shadow: 0 0 1px red;
}

Demonstration

I launched a virtual machine to test on IE, it looks good :