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

Menangani Kefungsian Elemen Pseudo dengan Elemen Imej

Dalam percubaan untuk mempertingkatkan kefungsian, soalan ini meneroka mengapa elemen pseudo seperti :sebelum dan :selepas jangan berinteraksi dengan elemen imej () seperti yang mereka lakukan dengan tag lain seperti div dan rentang. Untuk menggambarkan masalah, pertimbangkan HTML dan CSS berikut:

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt=""/>

img:before {
  content: "hello";
}

Setelah meneliti kod ini dalam penyemak imbas seperti Chrome 13 dan Firefox 6, ternyata tiada perubahan yang dijangka berlaku dengan elemen imej. Tingkah laku ini berbeza dengan keserasian yang ditunjukkan oleh elemen div dan span.

Menyelam ke dalam spesifikasi, kami menemui petikan ini:

Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Pernyataan ini mencadangkan takrifan yang tidak lengkap untuk interaksi antara unsur pseudo dan elemen imej, membayangkan ketidakserasian semasa mereka. Untuk mendapatkan maklumat lanjut tentang perkara ini, rujuk respons lain pada platform ini.

Atas ialah kandungan terperinci Mengapa `:before` dan `:after` Pseudo-elements Tidak Berfungsi dengan `` Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!