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: 15px;
}
blockquote:before {
  color: #111;
  content: open-quote;
  font-size: 4em;
  line-height: 0;
  vertical-align: -0.4em;
}

When I add more than two blockquotes they show only 1 quotation mark. I want to show 2 ". I can't figure out why this is happening. Please see jsfiddle for example.

http://jsfiddle.net/yg7j5mkm/

Answer 1

You must close the quotes before open another one.

Here a workaround: Close quotes, but invisible.

blockquote {
  padding: 22px;
  quotes: "\201C""\201D""\2018""\2019";
  font-size: 15px;
}
blockquote:before {
  color: #111;
  content: open-quote;
  font-size: 4em;
  line-height: 0;
  vertical-align: -0.4em;
}
blockquote:after {
  visibility: hidden;
  content: close-quote;
}

<blockquote>
  <p style="display:inline;">Lorem ipsum dolor...</p>
</blockquote>

<blockquote>
  <p style="display:inline;">Lorem ipsum dolor...</p>
</blockquote>

<blockquote>
  <p style="display:inline;">Lorem ipsum dolor...</p>
</blockquote>

Answer 2

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/

Answer 3

In blockquote:after you set the content to no-close-quote:

blockquote:after {
  content: no-close-quote
}

Here is a snippet:

  blockquote {
      padding: 22px;
      quotes: "\201C""\201D""\2018""\2019";
      font-size: 15px;
  }
  blockquote:before {
      color: #111;
      content: open-quote;
      font-size: 4em;
      line-height: 0;
      vertical-align: -0.4em;
  }
  
  /* Add this */
  blockquote:after {
      content: no-close-quote;
  }

<blockquote>
    <p style="display:inline;">Blockquote 1</p>
</blockquote>
<blockquote>
    <p style="display:inline;">Blockquote 2</p>
</blockquote>