web-dev-qa-db-fra.com

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

Je me demande pourquoi le navigateur affiche les guillemets doubles ouverts uniquement 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>
htmlcsspseudo-elementcss-content
88
Pavan Tiwari

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 intérieurs simples pour le second. Voici comment la ponctuation de citation fonctionne dans les citations imbriquées. Voir Wikipedia et les références aux citations imbriquées dans celle-ci.

Notamment, les limites des éléments sont ignorées. Par conséquent, 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 toujours de la même manière, ce qui le rend particulièrement utile dans les paragraphes contient 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 guillemets sont imbriqués dépend uniquement du nombre de open-quotele sable close-quotes qui ont été générés à tout moment et l’algorithme est détaillé dans section 12.3.2 de la spécification CSS2 , et se termine par la note suivante:

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

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

En insérant des guillemets proches en utilisant ::after la citation pour le premier élément est terminée avant la rencontre du deuxième élément, de sorte qu'il n'y a pas d'imbrication de 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 voulez pas réellement afficher les guillemets proches, vous pouvez toujours empêcher le navigateur de générer des guillemets simples pour le deuxième élément à l'aide de 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>
135
BoltClock

C’est parce que vous n’avez pas fermé les citations précédentes, les citations suivantes ne resteront qu’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;
}
<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 guillemets primaires et secondaires d'une balise en utilisant la propriété CSS quotes 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>
34
Springer F