11

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?

5 Answers 5

48

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".

0
10

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

content: "\""; 
1
  • 1
    Chrome does support open-quote and close-quote now.
    – Mick_
    Jun 27, 2018 at 10:39
4

Chrome supports content partially, and open-quote is not supported.

So what you can try is to use content: '“'; The shortcut to print the open-quote in Windows is Alt+0147 and if there is need for close-quote also then Alt+0148.

2

See Rendering Quotes With CSS for more detail on this issue as well as how to localize the quotes for different languages.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.