CSS open quotation mark shows 1 quotation mark

Question

I use the following CSS to add open quotation marks 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 blocks, they show only 1 quotation mark. I want to show 2 " . I can’t understand why this is happening. For example, see Jsfiddle.

http://jsfiddle.net/yg7j5mkm/

Answer 1

You must close the quotation marks before opening another one.

Here is a workaround: closing 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 level of nesting of quotes: the number of occurrences of the "open quote" in the entire generated text before the current occurrence, minus the number of occurrences of the "closed 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 , for your second open-quote there is one open-quote occurrence in front of it and none of the close-quote , i.e. the depth is 1, so the quotation marks that you specified as the second pair are used. ("Nesting" does not necessarily mean nested blockquote elements in this definition.)

To fix this, also use close-quote - and hide them if you do not want them to be displayed:

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

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

Answer 3

In blockquote:after , blockquote:after you set the content value 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> 

Answer 4

Why not just that?

 content: '\201C'; 

It is not so semantically, but with quotes: rule in any case overrides any l10n.