How can I escape single or double quotation marks in CSS?

Question

I have the following HTML code:

<div id="working">Touch Me!</div>
<div id="notworking">Don't Touch Me!</div>

And I have this CSS:

#working:hover:after{
    content: "Nice Touch";
    color: #0C6;
}
#notworking:hover:after{
    content: "I Said Don't Touch Me";
    color: #C30;
}   

This code is working fine (my example is here): http://jsfiddle.net/gchoken/NaEPq/

My problem is that when I use double quotes for "I Said Don't Touch Me", I get a warning.

CSS:

#notworking:hover:after{
    content: ""I Said Don't Touch Me"";
    color: #C30;
}  

Warning message:

Warning: Found unclosed string '";'.

So, how exactly can I escape single or double quotes in CSS?

Answer 1

Use a backslash.

content:"i said don\"t Touch me";

Same goes for single quotes within single-quoted strings.

jsFiddle demo

Answer 2

Just use a \ to escape the "

#notworking:hover:after{
    content:"i said don\"t Touch me";
        color: #C30;
} 

Demo @ http://jsfiddle.net/NaEPq/4/