Pourquoi les guillemets doubles ne sont-ils affichés que pour le premier élément?

Je me demande pourquoi le navigateur affiche des doubles guillemets ouverts uniquement pour le premier élément. Le deuxième élément a plutôt des guillemets simples.

a::before {
  content: open-quote;
}

<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Vos guillemets ouverts ne sont pas terminés, le navigateur fait donc l'hypothèse «intelligente» que vous êtes sur le point d'imbriquer vos guillemets, ce qui entraîne des guillemets extérieurs doubles pour le premier élément et des guillemets intérieurs simples pour le second. C'est ainsi que fonctionne la ponctuation des guillemets dans les citations imbriquées. Voir Wikipedia et les références aux citations imbriquées.

Notamment, les limites des éléments sont ignorées, donc cela n'a pas d'importance même si votre deuxième élément est imbriqué plus profondément ou si les deux éléments sont imbriqués dans leurs propres éléments parents, cela fonctionnera toujours de la même manière, ce qui le rend particulièrement utile dans les paragraphes qui peuvent contiennent différents types et combinaisons d'éléments phrasé ( a, br, code, em, span, strong, etc, ainsi que qlui - même). La façon dont les guillemets sont imbriqués dépend uniquement du nombre de open-quotes et de close-quotes générés à tout moment, et l'algorithme est détaillé dans la section 12.3.2 de la spécification CSS2 , se terminant par la note suivante:

Remarque. La profondeur des citations est indépendante de l'imbrication du document source ou de la structure de mise en forme.

À cette fin, il existe deux soi-disant «solutions» à ce problème, qui impliquent toutes deux l'ajout d'un ::after pseudo-élément pour équilibrer le premier ensemble de guillemets ouverts.

En insérant des guillemets fermés à ::afterl' aide de la citation, le premier élément se termine avant que le deuxième élément ne soit rencontré afin qu'il n'y ait pas d'imbrication de citations.

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>

Si vous ne souhaitez pas afficher les guillemets fermés, vous pouvez toujours empêcher le navigateur de générer des guillemets simples pour le deuxième élément à l'aide de 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>

C'est parce que vous n'avez pas fermé les citations précédentes, les citations suivantes ne resteront qu'avec une seule '.

alors utilisez le pseudo élément afteraveccontent: close-quote

Voir ci-dessous l'extrait:

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>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Vous pouvez également modifier les guillemets principaux et secondaires d'une balise à l'aide de la propriété CSS quotes comme suit:

a {
  quotes: "“" "”" "“" "”";
           ^   ^   ^   ^
           |   |   |   |
           |   |   |   |_ #secondary close quotes 
           |   |   |_____ #secondary open quotes 
           |   |_________ #primary close quotes    
           |_____________ #primary open quotes 
 }

voir ci-dessous l'extrait:

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>