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

Question

Je me demande pourquoi le navigateur n'affiche des guillemets doubles ouverts que pour le premier élément. Le deuxième élément a des guillemets simples à la place.

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

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

Answer 1

Vos guillemets ouverts ne sont pas terminés, le navigateur suppose donc "intelligemment" que vous êtes sur le point d'imbriquer vos guillemets, ce qui se traduit par des guillemets extérieurs doubles pour le premier élément et des guillemets intérieurs simples pour le second. C'est ainsi que la ponctuation des guillemets fonctionne dans les guillemets imbriqués. Voir Wikipedia et les références aux citations qui y sont imbriquées.

En particulier, les limites des éléments sont ignorées, de sorte que même si votre deuxième élément est imbriqué plus profondément ou si les deux éléments sont imbriqués dans leurs propres éléments parents, cela fonctionnera de la même manière, ce qui le rend particulièrement utile dans les paragraphes qui peuvent contenir différents types et combinaisons d'éléments de phraséologie ( a , br , code , em , span , strong etc., ainsi que q lui-même). La manière dont les guillemets sont imbriqués 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 le document section 12.3.2 de la spécification CSS2 et se termine par la note suivante :

Note. La profondeur de citation est indépendante de l'imbrication du document source ou de la structure de mise en forme.

À cette fin, il existe deux soi-disant "solutions" à ce problème, qui impliquent toutes deux l'ajout d'un module d'alimentation en énergie. ::after pour équilibrer le premier ensemble de guillemets ouverts.

En insérant des guillemets fermés en utilisant ::after la citation du premier élément se termine avant que le deuxième élément ne soit rencontré, il n'y a donc pas d'imbrication des citations.

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 vous ne souhaitez pas réellement rendre les guillemets fermés, vous pouvez toujours empêcher le navigateur de générer des guillemets simples pour le deuxième élément en utilisant la commande suivante 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>

Answer 2

C'est parce que vous n'avez pas fermé les guillemets précédents, les prochains guillemets ne resteront qu'avec un seul ' .

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;
}

<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>

Vous pouvez également modifier les citations primaires et secondaires d'une balise en utilisant la fonction citations La propriété CSS comme suit :

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

voir l'extrait ci-dessous :

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>