Proper Curly Quotes for CSS3 Pseudo-elements

A great way to include quotations marks on your blockquote tags is to use CSS3 Pseudo-elements. I see this being suggested around the web with some code that looks like so:

blockquote:before {content:open-quote;}
blockquote:after {content:close-quote;}

But that actually returns some basic quotation marks, not curly quotes. You could drive yourself batty wondering what’s happening here, but the answer is simple. Your quotes need quotes. That is:

blockquote:before {content:"open-quote";}
blockquote:after {content:"close-quote";}

Or you can use the Unicode:

blockquote:before {content:"\201C"; left:0; top:30px;}
blockquote:after {content:"\201D"; right:0; bottom:0;}

Bulletproof Blockquotes

I use the following code on nearly every one of my sites, and it’s consistently provided me with at least a good starting point, if not a final product, in nearly every scenario:

blockquote {margin:20px 0; padding:0 50px; font-size:150%; line-height:100%;}
blockquote:before, blockquote:after {position:absolute; font-size:100px;}
blockquote:before {content:"open-quote"; left:0; top:30px;}
blockquote:after {content:"close-quote"; right:0; bottom:0;}

Up Next: Minimized: Kevin Batdorf's Liquid Slider's CSS