Rumah > hujung hadapan web > tutorial css > Mengapa CSS `:after` Tidak Menambahkan Kandungan pada Elemen yang Diganti Seperti Imej dan Input?

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

Barbara Streisand
Lepaskan: 2024-12-16 05:04:09
asal
921 orang telah melayarinya

Why Doesn't CSS `:after` Add Content to Replaced Elements Like Images and Inputs?

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>
Salin selepas log masuk

Dengan CSS berikut:

span:before {
  content: "Before";
}

span:after {
  content: "After";
}
Salin selepas log masuk

DOM untuk senario ini kelihatan seperti ini:

<span>
  <before>Before</before>
  Content of span
  <after>After</after>
</span>
Salin selepas log masuk

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" />
Salin selepas log masuk
img:after {
  content: "After";
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan