Mi chiedo perché il browser mostri doppie virgolette aperte solo per il primo elemento. Il secondo elemento ha invece virgolette singole.
a::before {
content: open-quote;
}<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>Risposte:
Le virgolette aperte non vengono terminate, quindi il browser presume "intelligente" che stai per annidare le virgolette, risultando in virgolette doppie esterne per il primo elemento e singole virgolette interne per il secondo. Ecco come funziona la punteggiatura delle virgolette nelle virgolette annidate. Vedi Wikipedia e i riferimenti alle citazioni annidate in esso.
In particolare, i confini degli elementi vengono ignorati, quindi non importa anche se il tuo secondo elemento è nidificato più in profondità o se entrambi gli elementi sono nidificati nei propri elementi padre, funzionerà comunque allo stesso modo, il che lo rende particolarmente utile nei paragrafi che potrebbero contenere diversi tipi e combinazioni di elementi fraseggio ( a, br, code, em, span, strong, ecc, così come qse stesso). Come le citazioni sono annidati dipende esclusivamente dal numero di open-quotes e close-quotes che sono stati generati in qualsiasi punto nel tempo, e l'algoritmo è dettagliato nel capitolo 12.3.2 delle specifiche CSS2 , che termina con la seguente nota:
Nota. La profondità della citazione è indipendente dalla nidificazione del documento di origine o dalla struttura di formattazione.
A tal fine, ci sono due cosiddette "soluzioni" a questo problema, entrambe implicano l'aggiunta di uno ::afterpseudo-elemento per bilanciare il primo insieme di virgolette aperte.
Inserendo virgolette chiuse utilizzando ::afterla citazione per il primo elemento viene terminata prima che venga incontrato il secondo elemento, quindi non vi è alcuna nidificazione delle virgolette.
a::before {
content: open-quote;
}
a::after {
content: close-quote;
}<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>Se in realtà non si desidera visualizzare virgolette chiuse, è comunque possibile impedire al browser di generare virgolette singole per il secondo elemento utilizzando no-close-quote.
a::before {
content: open-quote;
}
a::after {
content: no-close-quote;
}<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>Questo perché non hai chiuso le virgolette precedenti, le virgolette successive rimarranno solo con una '.
quindi usa lo pseudo elemento afterconcontent: close-quote
Vedi sotto lo snippet:
Puoi anche modificare le virgolette primarie e secondarie su un tag utilizzando la proprietà CSS delle virgolette come segue:
a {
quotes: "“" "”" "“" "”";
^ ^ ^ ^
| | | |
| | | |_ #secondary close quotes
| | |_____ #secondary open quotes
| |_________ #primary close quotes
|_____________ #primary open quotes
}vedi frammento di seguito:
a {
quotes: "“" "”" "“" "”";
}
a::before{
content: open-quote;
}<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a> <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>
open-quotenon aprire un preventivo. Non si riferisce a virgolette doppie.