html - uma - tags css




Por que as aspas duplas são mostradas apenas para o primeiro elemento? (2)

Isso ocorre porque você não fechou as cotações anteriores, as próximas cotações permanecerão apenas com uma ' .

então use o pseudo elemento after com o content: close-quote

Veja abaixo o trecho:

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>

Você também pode editar as cotações primárias e secundárias em uma tag usando quotes como propriedade CSS da seguinte maneira:

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

veja abaixo o trecho:

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>

Eu estou querendo saber porque o navegador mostra aspas duplas abertas apenas para o primeiro elemento. O segundo elemento tem aspas simples em vez disso.

a::before {
  content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>


Suas aspas abertas não são terminadas, então o navegador faz a suposição "inteligente" de que você está prestes a aninhar suas aspas, resultando em aspas duplas externas para o primeiro elemento e aspas internas simples para o segundo. É assim que a pontuação de cotações funciona em cotações aninhadas. Veja a Wikipedia e as referências a citações aninhadas.

Notavelmente, limites de elemento são ignorados, então não importa se seu segundo elemento está aninhado mais profundamente ou se ambos os elementos estiverem aninhados em seus próprios elementos pais, ele ainda funcionará da mesma maneira, o que o torna particularmente útil em parágrafos que podem contém diferentes tipos e combinações de elementos de fraseado ( a , br , code , em , span , strong , etc, assim como o próprio q ). A maneira como as aspas são aninhadas depende unicamente do número de open-quote close-quote que foram geradas em qualquer momento, e o algoritmo é detalhado na seção 12.3.2 da especificação CSS2 , terminando com a seguinte nota:

Nota. A profundidade de cotação é independente do aninhamento do documento de origem ou da estrutura de formatação.

Para esse fim, há duas chamadas "soluções" para esse problema, ambas envolvendo a adição de um pseudoelempo ::after para balancear o primeiro conjunto de aspas abertas.

Inserindo aspas próximas usando ::after a cotação do primeiro elemento é terminada antes que o segundo elemento seja encontrado, então não há aninhamento de cotações.

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>

Se você realmente não deseja renderizar aspas, você ainda pode impedir que o navegador gere aspas simples para o segundo elemento usando o 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>





css-content