Mengapa Pseudo-elements Tidak Berfungsi dengan `` Tag dalam CSS?

Elemen Pseudo dan Elemen Imej: Teka-teki CSS

Walaupun kebolehgunaan meluas elemen pseudo seperti :sebelum dan :selepas dalam CSS, elemen pseudo mereka kefungsian dengan elemen imej (<img src="/static/imghwm/default1.png" data-src="http://0.gravatar.com/avatar/this-is-not-a-hash" class="lazy" alt="Mengapa Pseudo-elements Tidak Berfungsi dengan `` Tag dalam CSS?" >) kekal sebagai pengecualian yang membingungkan. Seperti yang ditunjukkan dalam coretan kod di bawah, menambahkan elemen pseudo pada elemen img tidak menghasilkan hasil yang diharapkan:

<img  src="/static/imghwm/default1.png" data-src="http://0.gravatar.com/avatar/this-is-not-a-hash" class="lazy" alt="Mengapa Pseudo-elements Tidak Berfungsi dengan `` Tag dalam CSS?" >

img:before {
  content: "hello";
}

Walaupun ia berfungsi dengan lancar dengan elemen lain seperti div dan span, kesan yang diingini ialah tiada apabila digunakan pada elemen img.

Behind the Scene: CSS Spesifikasi

Spesifikasi CSS menerangkan percanggahan ini. Ia secara eksplisit menyatakan bahawa interaksi antara elemen pseudo dan elemen yang diganti, termasuk img dalam HTML, tidak ditakrifkan sepenuhnya dalam versi semasa. Ini menunjukkan bahawa spesifikasi semasa tidak menyatakan kelakuan elemen pseudo dengan elemen img.

Penyelesaian Potensi: Menunggu Penyeragaman

Walau bagaimanapun, keadaan ini mungkin tidak berterusan selama-lamanya. Spesifikasi menunjukkan bahawa interaksi antara elemen pseudo dan elemen yang diganti akan ditakrifkan lagi dalam versi masa hadapan. Ini membuatkan kami menjangkakan bahawa elemen pseudo akhirnya akan disokong untuk elemen img dengan cara yang lebih komprehensif dan konsisten.

Sehingga itu, pembangun yang ingin mencapai kesan serupa menggunakan elemen img mungkin perlu mempertimbangkan pendekatan alternatif, seperti seperti menggunakan JavaScript atau mencipta elemen pembungkus tambahan di sekeliling img.

Atas ialah kandungan terperinci Mengapa Pseudo-elements Tidak Berfungsi dengan `` Tag dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!