Por que as aspas duplas são mostradas apenas para o primeiro elemento?

Estou me perguntando por que o navegador mostra aspas duplas abertas apenas para o primeiro elemento. O segundo elemento tem aspas simples.

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

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

Suas aspas abertas não são encerradas, então o navegador faz a suposição "inteligente" de que você está prestes a aninhar suas aspas, resultando em aspas externas duplas para o primeiro elemento e aspas internas simples para o segundo. É assim que a pontuação das citações funciona em citações aninhadas. Consulte a Wikipedia e as referências a citações aninhadas nela.

Notavelmente, os limites do elemento são ignorados, por isso não importa, mesmo se seu segundo elemento for aninhado mais profundamente ou se ambos os elementos estiverem aninhados em seus próprios elementos pais, ele ainda funcionará da mesma maneira, o que o torna particularmente útil em parágrafos que podem conter diferentes tipos e combinações de elementos fraseado ( a, br, code, em, span, strong, etc, bem como qem si). Como as cotações são aninhadas depende exclusivamente do número de open-quotes e close-quotes que foram gerados em qualquer ponto no tempo, e o algoritmo é detalhado na seção 12.3.2 da especificação CSS2 , terminando com a seguinte nota:

Nota. A profundidade das citações é independente do aninhamento do documento de origem ou da estrutura de formatação.

Para esse fim, existem duas chamadas "soluções" para esse problema, ambas envolvendo a adição de um ::afterpseudoelemento para equilibrar o primeiro conjunto de cotações em aberto.

Ao inserir aspas fechadas, ::aftero primeiro elemento é encerrado antes que o segundo elemento seja encontrado, portanto, não há aninhamento de aspas.

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 você realmente não deseja renderizar aspas fechadas, ainda pode evitar que o navegador gere aspas simples para o segundo elemento usando 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>

Isso porque você não fechou as cotações anteriores, as próximas ficarão apenas com uma '.

então use o pseudo elemento aftercomcontent: close-quote

Veja o snippet abaixo:

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>

Você também pode editar as aspas primárias e secundárias em uma tag usando a propriedade CSS de aspas da seguinte maneira:

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

veja o snippet abaixo:

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>