Dlaczego podwójne cudzysłowy są wyświetlane tylko dla pierwszego elementu?

Zastanawiam się, dlaczego przeglądarka wyświetla podwójne cudzysłowy otwarte tylko dla pierwszego elementu. Zamiast tego drugi element zawiera pojedyncze cudzysłowy.

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

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

Twoje cudzysłowy otwarte nie są przerywane, więc przeglądarka przyjmuje „inteligentne” założenie, że masz zamiar zagnieździć cudzysłowy, co skutkuje podwójnymi cudzysłowami zewnętrznymi dla pierwszego elementu i pojedynczymi cudzysłowami wewnętrznymi dla drugiego. Tak działa interpunkcja w cudzysłowach w zagnieżdżonych cudzysłowach. Zobacz Wikipedię i zawarte w niej odniesienia do zagnieżdżonych cytatów.

Warto zauważyć, że granice elementów są ignorowane, więc nie ma znaczenia, nawet jeśli drugi element jest zagnieżdżony głębiej lub jeśli oba elementy są zagnieżdżone we własnych elementach nadrzędnych, nadal będzie działać w ten sam sposób, co czyni go szczególnie użytecznym w akapitach, które mogą zawierać różne rodzaje oraz kombinacje elementów frazowania ( a, br, code, em, span, strong, itp, a także qsam). Zagnieżdżanie cudzysłowów zależy wyłącznie od liczby open-quotes i close-quotes, które zostały wygenerowane w dowolnym momencie, a algorytm opisano szczegółowo w sekcji 12.3.2 specyfikacji CSS2 , kończąc na następującej uwadze:

Uwaga. Głębokość cytowania jest niezależna od zagnieżdżenia dokumentu źródłowego lub struktury formatowania.

W tym celu istnieją dwa tak zwane „rozwiązania” tego problemu, z których oba obejmują dodanie ::afterpseudoelementu, aby zrównoważyć pierwszy zestaw otwartych cudzysłowów.

Wstawienie zamykających cudzysłowów za ::afterpomocą cudzysłowu dla pierwszego elementu powoduje zakończenie przed napotkaniem drugiego elementu, dzięki czemu nie ma zagnieżdżania cytatów.

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>

Jeśli faktycznie nie chcesz renderować cudzysłowów zamykających, nadal możesz uniemożliwić przeglądarce generowanie pojedynczych cudzysłowów dla drugiego elementu za pomocą 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>

Dzieje się tak, ponieważ nie zamknąłeś poprzednich kwotowań, następne cytaty pozostaną tylko z jednym '.

więc użyj pseudoelementu afterzcontent: close-quote

Zobacz poniższy fragment:

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>

Możesz również edytować główne i dodatkowe cudzysłowy na tagu, używając właściwości CSS cudzysłowów w następujący sposób:

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

zobacz poniższy fragment:

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>