Mengapa CSS :after Pseudo-element Tidak Berfungsi pada Semua Elemen HTML?

Menyingkap Kekangan CSS :after Property

CSS :after pseudo-element menambah kandungan selepas kandungan elemen dalam dokumen pokok. Walau bagaimanapun, kebolehgunaannya menimbulkan persoalan.

Sekatan Elemen

Spesifikasi CSS menyatakan bahawa :after boleh digunakan pada kandungan sebelum atau selepas kandungan pokok elemen, nampaknya tanpa sekatan. Namun, dalam amalan, elemen tertentu, seperti imej (), input () dan jadual (), mempamerkan tingkah laku yang berbeza-beza.

Pemahaman Elemen yang Digantikan

Kunci untuk memahami tingkah laku ini terletak pada konsep elemen diganti. Elemen yang diganti ialah elemen yang penampilan dan dimensinya ditentukan oleh sumber luaran, termasuk imej, pemalam dan elemen bentuk.

:after dan Elemen yang Diganti

Amat penting , spesifikasi CSS dengan jelas menyatakan bahawa :before dan :after hanya berfungsi dengan tidak diganti elemen. Oleh itu, menggantikan elemen seperti dan tidak boleh mempunyai sifat :selepas atau :sebelum.

Pertimbangan Struktur DOM

Apabila menggunakan :sebelum dan :selepas dengan elemen yang tidak diganti, struktur DOM kelihatan seperti ini:

Kandungan span

Untuk elemen yang digantikan seperti imej, ini struktur tidak boleh dilaksanakan, justeru berlaku ketidakselarasan dalam tingkah laku.

Atas ialah kandungan terperinci Mengapa CSS :after Pseudo-element Tidak Berfungsi pada Semua Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!