Mengapa CSS :after Tidak Berfungsi dengan Semua Elemen HTML?

CSS :selepas Kelakuan dan Keserasian Elemen

Sifat CSS :after memanjangkan kandungan selepas elemen dalam aliran dokumennya. Walau bagaimanapun, tidak semua elemen kelihatan menyokong tingkah laku ini. Mengapa :after hanya berfungsi dengan elemen tertentu?

Jawapan: Elemen yang Diganti vs. Elemen Tidak Diganti

Mengikut spesifikasi CSS, hanya elemen yang tidak diganti boleh mempunyai sifat :sebelum dan :selepas. Elemen yang diganti mempunyai rupa dan dimensi yang ditentukan secara luaran, termasuk elemen seperti imej, pemalam dan kawalan borang.

Apakah Elemen yang Digantikan?

Elemen yang diganti termasuk:

• Imej (<img>)
• Pemalam (<objek>)
• Elemen bentuk (<butang>, <textarea>, <input>, <pilih>)

Kenapa :sebelum dan :selepas Jangan Bekerja dengan Diganti Elemen

Spesifikasi CSS menyatakan bahawa interaksi :sebelum dan :selepas dengan elemen yang diganti tidak ditakrifkan sepenuhnya. Aspek ini dikhaskan untuk spesifikasi masa hadapan.

Contoh

Pertimbangkan contoh berikut:

<span>Content of span</span>

span:before {
  content: "Before ";
}

span:after {
  content: " After";
}

Struktur DOM untuk ini contohnya ialah:

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

Struktur ini tidak berfungsi untuk elemen yang diganti seperti imej kerana ia tidak mempunyai kandungan dengan cara yang sama seperti elemen tidak diganti.

Oleh itu, sifat CSS :after hanya boleh digunakan dengan elemen tidak diganti, kerana penampilannya ditentukan oleh kandungan dalam elemen itu sendiri.

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