¿Por qué se muestran comillas dobles solo para el primer elemento?

Me pregunto por qué el navegador muestra comillas dobles abiertas solo para el primer elemento. El segundo elemento tiene comillas simples.

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

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

Sus comillas abiertas no terminan, por lo que el navegador asume "inteligentemente" que está a punto de anidar sus comillas, lo que resulta en comillas exteriores dobles para el primer elemento y comillas interiores simples para el segundo. Así es como funciona la puntuación de las citas en las citas anidadas. Consulte Wikipedia y las referencias a citas anidadas allí.

En particular, los límites de los elementos se ignoran, por lo que no importa incluso si su segundo elemento está anidado más profundamente o si ambos elementos están anidados en sus propios elementos principales, seguirá funcionando de la misma manera, lo que lo hace particularmente útil en párrafos que pueden contener diferentes tipos y combinaciones de elementos Enunciado ( a, br, code, em, span, strong, etc, así como qen sí). La forma en que se anidan las cotizaciones depende únicamente del número de open-quotesys close-quoteque se han generado en cualquier momento, y el algoritmo se detalla en la sección 12.3.2 de la especificación CSS2 , que finaliza con la siguiente nota:

Nota. La profundidad de cotización es independiente del anidamiento del documento fuente o de la estructura de formato.

Con ese fin, existen dos supuestas "soluciones" a este problema, las cuales implican agregar un ::afterpseudo-elemento para equilibrar el primer conjunto de cotizaciones abiertas.

Al insertar comillas cercanas utilizando ::afterla cita para el primer elemento, se termina antes de que se encuentre el segundo elemento, por lo que no hay anidamiento de citas.

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 en realidad no desea representar comillas cerradas, aún puede evitar que el navegador genere comillas simples para el segundo elemento que usa 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>

Esto se debe a que no cerró las citas anteriores, las próximas citas permanecerán solo con una '.

así que usa el pseudo elemento afterconcontent: close-quote

Vea el siguiente fragmento:

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>

También puede editar las comillas primarias y secundarias en una etiqueta utilizando la propiedad CSS de comillas de la siguiente manera:

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

ver el fragmento de abajo:

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>