Mengapa CSS `:after` Tidak Menambahkan Kandungan pada Elemen yang Diganti Seperti Imej dan Input?

CSS :selepas Tidak Menambah Kandungan pada Elemen Tertentu

Sifat CSS :after digunakan untuk memasukkan kandungan selepas elemen dalam pepohon dokumen . Walau bagaimanapun, ia kelihatan hanya berfungsi dengan elemen tertentu, seperti perenggan (

) dan jadual (), tetapi tidak dengan elemen yang diganti seperti imej () dan input bentuk ( ).

Apa yang Menentukan Kebolehterimaan :selepas dan :sebelum Sifat?

Tingkah laku :selepas dan :sebelum dikawal oleh fakta bahawa elemen yang diganti berfungsi secara berbeza. Elemen yang diganti ialah elemen yang penampilan dan dimensinya ditentukan oleh sumber luaran, seperti imej, pemalam dan elemen bentuk.

Menurut spesifikasi CSS, :sebelum dan :selepas hanya berfungsi dengan elemen yang tidak diganti. Ini bermakna ia tidak boleh digunakan untuk menambah kandungan sebelum atau selepas elemen diganti.

Contoh dengan Span

Pertimbangkan HTML berikut:

<span>Content of span</span>

Dengan CSS berikut:

span:before {
  content: "Before";
}

span:after {
  content: "After";
}

DOM untuk senario ini kelihatan seperti ini:

<span>
  <before>Before</before>
  Content of span
  <after>After</after>
</span>

Struktur ini menunjukkan bagaimana :sebelum dan :selepas boleh memasukkan kandungan sebelum dan selepas elemen yang tidak diganti.

Pengecualian dengan Imej

Walau bagaimanapun, menggunakan :after dengan imej tidak menghasilkan yang sama hasil:

<img src="image.png" />

img:after {
  content: "After";
}

Ini kerana :after tidak boleh mengubah rupa elemen yang diganti.

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