Mengapa CSS `:before` dan `:after` Pseudo-elements Tidak Berfungsi dengan `` Elemen?

Elemen Pseudo dan Elemen Imej: Dilema Keserasian

Dalam bidang CSS, elemen pseudo seperti :sebelum dan :selepas adalah meluas digunakan untuk meningkatkan penampilan visual elemen pada halaman web. Walau bagaimanapun, apabila ia datang kepada elemen imej (), elemen pseudo ini kelihatan kosong, menimbulkan persoalan: mengapa ia tidak berfungsi dengan elemen img?

Penjelasan Teknikal

Sebabnya terletak pada spesifikasi CSS itu sendiri. Dokumentasi rasmi secara eksplisit menyatakan bahawa "Spesifikasi ini tidak mentakrifkan sepenuhnya interaksi ::before dan ::after dengan elemen yang diganti (seperti IMG dalam HTML)." Dalam erti kata lain, gelagat unsur pseudo apabila digunakan pada elemen yang diganti, seperti imej, tidak dinyatakan sepenuhnya dalam piawaian semasa. Kekaburan ini memberi ruang kepada ketidakkonsistenan penyemak imbas dan kekurangan sokongan.

Sokongan Penyemak Imbas Semasa

Akibat daripada tingkah laku yang tidak ditentukan ini, penyemak imbas utama seperti Chrome dan Firefox telah memilih untuk tidak untuk menyokong unsur pseudo dengan unsur img. Ini bermakna walaupun anda membuat CSS anda dengan teliti untuk memasukkan :sebelum atau :selepas pada imej, kesannya tidak akan kelihatan.

Penyelesaian Kemungkinan

Semasa di sana pada masa ini tiada cara rasmi untuk memaksa elemen pseudo berfungsi dengan elemen img, terdapat beberapa penyelesaian yang anda boleh teroka:

• Balut imej dalam elemen bekas: Balut imej dalam
  atau elemen dan gunakan elemen pseudo pada bekas dan bukannya imej itu sendiri.
• Gunakan penapis CSS: Gunakan penapis CSS seperti bayangan kotak atau kecerahan untuk mencapai kesan visual yang serupa dengan elemen pseudo.

Pandangan Masa Depan

Menurut spesifikasi CSS, definisi penuh interaksi elemen pseudo dengan elemen yang diganti akan digariskan dalam spesifikasi masa hadapan. Ini mungkin berpotensi membuka pintu untuk sokongan masa depan bagi :before dan :after dengan elemen img. Walau bagaimanapun, sehingga itu, penyelesaian ini kekal sebagai pendekatan paling praktikal apabila mencari fungsi yang serupa untuk imej.