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>
html
css
pseudo-element
css-content
Pavan Tiwari
sumber
sumber
open-quote
tidak membuka sebuah kutipan. Ini tidak mengacu pada karakter kutip ganda.Jawaban:
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, sertaq
sendiri). Bagaimana kutipan disarangkan hanya bergantung pada jumlahopen-quote
s danclose-quote
s yang telah dihasilkan pada titik waktu mana pun, dan algoritme dirinci di bagian 12.3.2 spesifikasi CSS2 , diakhiri dengan catatan berikut:Untuk itu, ada dua yang disebut "solusi" untuk masalah ini, yang keduanya melibatkan penambahan
::after
elemen pseudo untuk menyeimbangkan set pertama dari open quotes.Dengan memasukkan tanda kutip tutup menggunakan
::after
kutipan 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>
sumber
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:
Tampilkan cuplikan kode
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>
sumber