Mengapa tanda kutip ganda hanya ditampilkan untuk elemen pertama?

Saya bertanya-tanya mengapa browser menampilkan tanda kutip terbuka ganda hanya untuk elemen pertama. Elemen kedua memiliki tanda kutip tunggal.

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

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

Kutipan terbuka Anda tidak diakhiri, sehingga browser membuat asumsi "pintar" bahwa Anda akan melapisi kutipan Anda, menghasilkan tanda kutip luar ganda untuk elemen pertama dan tanda kutip dalam tunggal untuk elemen kedua. Beginilah cara kerja tanda baca kutipan dalam kutipan bertingkat. Lihat Wikipedia dan referensi ke kutipan bertingkat di dalamnya.

Khususnya, batas elemen diabaikan, jadi tidak masalah meskipun elemen kedua Anda bersarang lebih dalam atau jika kedua elemen bertumpuk di elemen induknya sendiri, itu akan tetap berfungsi dengan cara yang sama, yang membuatnya sangat berguna dalam paragraf yang mungkin mengandung berbagai jenis dan kombinasi dari unsur-unsur ungkapan ( a, br, code, em, span, strong, dll, serta qsendiri). Bagaimana kutipan disarangkan hanya bergantung pada jumlah open-quotes dan close-quotes yang telah dihasilkan pada titik waktu mana pun, dan algoritme dirinci di bagian 12.3.2 spesifikasi CSS2 , diakhiri dengan catatan berikut:

Catatan. Kedalaman kutipan tidak bergantung pada penumpukan dokumen sumber atau struktur pemformatan.

Untuk itu, ada dua yang disebut "solusi" untuk masalah ini, yang keduanya melibatkan penambahan ::afterelemen pseudo untuk menyeimbangkan set pertama dari open quotes.

Dengan memasukkan tanda kutip tutup menggunakan ::afterkutipan untuk elemen pertama diakhiri sebelum elemen kedua ditemukan sehingga tidak ada penumpukan kutipan.

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>

Jika Anda tidak benar-benar ingin membuat tanda kutip dekat, Anda masih dapat mencegah browser membuat tanda kutip tunggal untuk menggunakan elemen kedua 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>

Ini karena Anda tidak menutup kutipan sebelumnya, kutipan berikutnya hanya akan tersisa satu ' .

jadi gunakan elemen pseudo after dengancontent: close-quote

Lihat cuplikan di bawah ini:

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>

Anda juga dapat mengedit tanda kutip primer dan sekunder pada tag dengan menggunakan properti CSS tanda kutip sebagai berikut:

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

lihat cuplikan di bawah ini:

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>