CSS open-quote mostra segno di 1 citazione

Question

sto usando il seguente CSS per aggiungere citazioni aperti prima di un paragrafo:

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; 
} 

Quando aggiungo più di due blockquotes mostrano solo 1 virgolette. Voglio mostrare 2 ". Non riesco a capire perché questo sta accadendo. Si prega di consultare jsfiddle per esempio.

http://jsfiddle.net/yg7j5mkm/

Answer 1

È necessario chiudere le virgolette prima di aprirne un altro.

Ecco una soluzione: Chiudi virgolette, ma invisibili.

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; 
 
    color: #111; 
 
    content: close-quote; 
 
    font-size: 4em; 
 
    line-height: 0; 
 
    vertical-align: -0.4em; 
 
}

<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:

Quale coppia di virgolette è utilizzato dipende dal livello di annidamento di citazioni: il numero di occorrenze di 'open-quote' in tutto il testo generato prima dell'occorrenza attuale, meno il numero di occorrenze di 'close-quote'. Se la profondità è 0, la prima coppia viene utilizzato, se la profondità è di 1, la seconda coppia è usato, ecc

Dal momento che non si utilizza close-quote qui, per il secondo avete uno occorrenza di open-quote prima e nessuna di close-quote - ovvero la profondità è 1, quindi vengono utilizzate le virgolette specificate come seconda coppia. (“Nesting” non significa necessariamente nidificate elementi di questa definizione.)

Per risolvere questo problema usare close-quote come pure - e nascondere loro se non si vuole loro di mostrare:

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/