CSS open-quote shows 1 quotation mark

Question

I\'m using the following CSS to add open quotes before a paragraph:

blockquote {
  padding: 22px;
  quotes: \"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\";
  font-size         


        

Answer 1

http://www.w3.org/TR/CSS21/generate.html#quotes-insert:

Which pair of quotes is used depends on the nesting level of quotes: the number of occurrences of 'open-quote' in all generated text before the current occurrence, minus the number of occurrences of 'close-quote'. If the depth is 0, the first pair is used, if the depth is 1, the second pair is used, etc.

Since you are not using close-quote here, for your second blockquote you have one occurrence of open-quote before it, and none of close-quote – meaning, the depth is 1, so the quotes you specified as second pair are used. (“Nesting” does not necessarily mean nested blockquote elements by this definition.)

To fix this, use close-quote as well – and hide them if you don’t want them to show:

blockquote:after {
  content: close-quote;
  visibility:hidden; /* to hide closing quote – don’t use display:none here,
                        because that would mean close-quote is absent again */
}

http://jsfiddle.net/yg7j5mkm/2/