html - textuales - ¿Por qué las comillas dobles se muestran solo para el primer elemento?

uso de comillas fundeu

Question

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

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

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

Answer 1

Esto se debe a que no cerró las citas anteriores, las siguientes solo se mantendrán con una '' .

así que usa el pseudo elemento after con content: close-quote

Vea el siguiente fragmento de código:

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 citas primarias y secundarias en una etiqueta mediante el uso de la propiedad CSS de las quotes siguiente manera:

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

Vea el siguiente fragmento de código:

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>

Answer 2

Sus comillas abiertas no se terminan, por lo que el navegador hace la suposición "inteligente" de que está a punto de anidar sus cotizaciones, lo que da como resultado comillas externas dobles para el primer elemento y comillas internas simples para el segundo. Así es como funciona la puntuación de comillas en las citas anidadas. Ver Wikipedia y las referencias a citas anidadas en el mismo.

Cabe destacar que 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 primarios, seguirá funcionando de la misma manera, lo que lo hace particularmente útil en párrafos que pueden ser útiles. Contienen diferentes tipos y combinaciones de elementos de fraseo ( a , br , code , em , span , strong , etc, así como q sí). La forma en que se anidan las comillas depende únicamente de la cantidad de open-quote y close-quote cerradas que se hayan generado en cualquier momento, y el algoritmo se detalla en la sección 12.3.2 de las especificaciones de CSS2 , que finaliza con la siguiente nota:

Nota. La profundidad de la cita es independiente del anidamiento del documento de origen o de la estructura de formato.

Para ese fin, hay dos llamadas "soluciones" a este problema, las cuales involucran agregar un pseudoelemento ::after para equilibrar el primer conjunto de citas abiertas.

Insertando comillas cerradas usando ::after la cotización para el primer elemento termine antes de que se encuentre el segundo elemento para que no haya anidación de las cotizaciones.

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 presentar comillas cerradas, aún puede evitar que el navegador genere comillas simples para el segundo elemento usando comillas 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>