Proper Curly Quotes for CSS3 Pseudo-elements

Note! This has varied results across browsers these days.

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.

blockquote {position:relative;}
blockquote:before {content:"\201C"; left:0; top:0;}
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:2em 0; padding:0 2em; font-size:150%; line-height:100%;}
blockquote:before, blockquote:after {position:absolute; font-size:100px;}
blockquote:before {content:"open-quote"; left:0; top:.5em;}
blockquote:after {content:"close-quote"; right:0; bottom:0;}

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