CSS 3: Adding quote symbol to beginning of blockquote

Question

Can anyone tell me why this (also available live at http://jsfiddle.net/A2eTG/6/) renders a " symbol before the blockquote in Firefox but not Chrome/Safari?

blockquote
{
    padding: 0 60px;
    padding:10px;
    padding-left:55px;
}

blockquote:before {
    display: block;
    font-size: 700%;
    content: open-quote;
    height: 1px;
    margin-left: -0.55em;
    position:relative;
    top:-20px;
}

The blockquote:before selector shows up in Chrome's developer tools but doesn't appear on screen.

What gives?

Answer 1

I think the best solution would be

content: '“';
content: open-quote;

That way browsers that support open-quote would use it and ignore the earlier content value, while browsers that don't know what open-quote is will ignore that line and use the first one.

Answer 2

To help others who came across this and want prettier quotes than ", these are the codes for double open, double closed, single open, and single closed quotation marks respectively: "\201C", "\201D", "\2018", "\2019".

Answer 3

Looks like Chrome doesn't support content: open-quote. Try this instead:

content: "\"";