How to color the asterix first character in a p tag

问题

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/

回答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 :

来源：https://stackoverflow.com/questions/17835638/how-to-color-the-asterix-first-character-in-a-p-tag