CSS open-quote shows 1 quotation mark
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/
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>
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>