Quote punctuation characters																									
Glyph	Description	Unicode escape	Entity	Mac	Windows	Linux																			
“	Left double quotation mark	\201C	“	Option-[	Alt+0147	AltGr+V																			
”	Right double quotation mark	\201D	”	Option-Shift-[	Alt+0148	AltGr+B																			
‘	Left single quotation mark	\2018	‘	Option-]	Alt+0145	AltGr+Shift+V																			
’	Right single quotation mark	\2019	’	Option-Shift-]	Alt+0146	AltGr+Shift+B																			
																									
																									
blockquote{}																									
cite{}																									
q{}																									
																									
																									
																									
q {quotes: '“' '”' '‘' '’';} /* opening followed by closing quote pairs */																									
/* The equivalent using Unicode escapes:																									
  q {quotes: '\201C' '\201D' '\2018' '\2019';} */																									
q:before {content: open-quote;}																									
q:after {content: close-quote;}																									
Unfortunately, browsers use the last quote pair in the quotes property for more deeply nested quotations. In addition, Opera will use the wrong quote characters if you have more nested <q> than your quotes property defines quoting levels for (Opera quotes bug test case). Make sure you have enough levels by repeating quote pairs as necessary:																									
/* four levels of nested quotes */																									
q {quotes: '“' '”' '‘' '’' '“' '”' '‘' '’';}																									
WebKit had "" and '' hard-coded in the browser stylesheet until Safari 5.1 and Chrome 11, which prevented q:before {content: open-quote;} and q:after {content: close-quote;} from working. The workaround is to define opening and closing punctuation manually, then override with open-quote and close-quote. While it’s a little more involved, that’s why we use this CSS on HTML5 Doctor:																									
/* for two levels of nested quotations */																									
q {quotes: '“' '”' '‘' '’';}																									
 /* extra content definitions for pre-2011 WebKit */																									
q:before {content: '“'; content: open-quote;}																									
q:after {content: '”'; content: close-quote;}																									
q q:before {content: '‘'; content: open-quote;}																									
q q:after {content: '’'; content: close-quote;}																									
  /* q in blockquote */																									
blockquote q:before {content: '‘'; content: open-quote;}																									
blockquote q:after {content: '’'; content: close-quote;}																									
blockquote q q:before {content: '“'; content: open-quote;}																									
blockquote q q:after {content: '”'; content: close-quote;}																									
  /* blockquote hanging opening quote */																									
blockquote:before {display: block; height: 0; content: "“"; margin-left: -.95em; font: italic 400%/1 Cochin,Georgia,"Times New Roman",serif; color: #999;}																									
																									
																									
																									
																									
																									
/* alternative blockquote style */																									
blockquote {quotes: '“' '”';}																									
blockquote p:before {content: '“'; content: open-quote;}																									
blockquote p:after {content: ''; content: no-close-quote;}																									
blockquote p:last-child:after {content: '”'; content: close-quote;}																									
																									
																									
																									
																									
																									
																									
<style>																									
q:before,																									
blockquote:before {																									
    content: open-quote;																									
}																									
q:after,																									
blockquote:after {																									
    content: no-close-quote;																									
}																									
</style>																									
<div class="block-demo">																									
  <q class="quote-before">Quote Before</q>																									
  <blockquote class="quote-before">																									
    <p>Quote Before</p>																									
  </blockquote>																									
  																									
  																									
<pre><code>																									
q:before,blockquote:before{content:open-quote}																									
q:after,blockquote:after{content:no-close-quote}																									
</code></pre>																									
</div>