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;}