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

Je me demande pourquoi le navigateur affiche des guillemets doubles seulement pour le premier élément. Le second élément contient des guillemets simples.

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 donne des guillemets doubles pour le premier élément et des guillemets simples pour le second. C’est ainsi que la ponctuation de citation fonctionne dans les citations nestedes. Voir Wikipedia et les références aux citations nestedes.

Notamment, les limites des éléments sont ignorées, donc peu importe si votre deuxième élément est nested plus profondément ou si les deux éléments sont nesteds 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 contiennent différents types et combinaisons d’éléments de phrasé ( a , br , code , em , span , strong , etc., ainsi que q lui-même). La manière dont les devis sont nesteds dépend uniquement du nombre de open-quote et close-quote qui ont été générés à un moment donné, et l’algorithme est détaillé dans la section 12.3.2 de la spécification CSS2 , en terminant par la note suivante:

Remarque. La profondeur de citation est indépendante de l’imbrication du document source ou de la structure de formatage.

À cette fin, il y a deux “solutions” à ce problème, qui impliquent toutes deux l’ajout d’un pseudo-élément ::after pour équilibrer le premier ensemble de guillemets ouverts.

En insérant des guillemets fermés à l’aide de ::after la citation du premier élément est terminée avant que le second élément ne soit rencontré, il n’y a donc pas d’imbrication de citations.

 a::before { content: open-quote; } a::after { content: close-quote; } 
 Google 
Amazon

C’est parce que vous n’avez pas fermé les guillemets précédents, les guillemets suivants restront seulement avec un ' .

utilisez donc le pseudo-élément after avec content: close-quote

Voir l’extrait ci-dessous:

 a::before{ content: open-quote; } a::after{ content: close-quote; } 
  Google 
Amazon
Google
Amazon