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>Respuestas:
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:
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>
open-quoteno abrir una cita. No se refiere a un carácter de comillas dobles.