Mengapa `:after` Tidak Menambah Kandungan pada Elemen yang Diganti?

Mengapa :after Menambahkan Kandungan pada Beberapa Elemen tetapi Bukan yang Lain?

CSS :after pseudo-elemen bertujuan untuk menambah kandungan selepas kandungan pokok dokumen sesuatu elemen. Walau bagaimanapun, telah diperhatikan bahawa fungsi ini hanya berfungsi secara konsisten untuk elemen tertentu. Untuk memahami tingkah laku ini, kita perlu meneroka konsep elemen yang diganti.

Menurut spesifikasi CSS, elemen yang digantikan ialah elemen yang penampilan dan dimensinya ditentukan oleh sumber luaran, seperti imej, pemalam dan bentuk elemen. Sebaliknya, elemen yang tidak diganti ialah unsur yang ciri visualnya dikawal oleh CSS atau penggayaan lalai penyemak imbas.

Yang penting, :before dan :after hanya berfungsi dengan elemen yang tidak diganti. Ini bermakna imej, kawalan borang yang diganti dan elemen lain yang diganti tidak boleh menambahkan kandungan padanya menggunakan elemen pseudo ini.

Rasional untuk sekatan ini ialah elemen yang diganti biasanya mempunyai saiz dan rupa yang telah ditetapkan, menjadikannya tidak praktikal untuk memasukkan kandungan tambahan sebelum atau selepasnya. Sebaliknya, ciri visual elemen yang diganti biasanya dikawal melalui kod sumber atau gaya CSS mereka.

Sebagai contoh, HTML dan CSS berikut akan menambah kandungan sebelum dan selepas elemen perenggan, tetapi tidak akan berfungsi untuk imej :

<p><span>Before</span>Paragraph Content<span>After</span></p>
<img src="image.jpg"/><span>After Image</span>

p:before {
  content: "Before: ";
}

p:after {
  content: " After";
}

img:after {
  content: "After Image";
}

Dengan memahami konsep elemen yang diganti, kita boleh menerangkan sebab :selepas berfungsi untuk elemen tertentu tetapi tidak yang lain, dan menjadi jelas bahawa tingkah laku itu bertujuan dan konsisten merentas pelayar.

Atas ialah kandungan terperinci Mengapa `:after` Tidak Menambah Kandungan pada Elemen yang Diganti?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!