Mengapakah CSS `:before` Tidak Berfungsi pada Elemen SVG Sebaris?

CSS :before on Inline SVG

Pengenalan

Menggayakan elemen SVG sebaris menggunakan :before dan :after pseudo-elements ialah tugas biasa dalam web pembangunan. Walau bagaimanapun, adalah penting untuk memahami had yang dikenakan ke atas elemen yang diganti, yang termasuk SVG.

Isunya

Dalam contoh kod yang diberikan, penggayaan :before yang digunakan pada elemen SVG tidak ditunjukkan, menunjukkan bahawa kandungan yang dijana mungkin tidak boleh digunakan untuk SVG.

Elemen Diganti dan Dijana Kandungan

SVG Sebaris dianggap sebagai elemen yang diganti, bermakna ia bukan sebahagian daripada aliran kandungan sebaliknya menggantikan elemen induk. Kandungan yang dijana, sebaliknya, ialah kandungan yang dimasukkan ke dalam pepohon dokumen menggunakan elemen pseudo seperti :sebelum dan :selepas.

Spesifikasi CSS

Spesifikasi untuk kandungan yang dijana dalam CSS ditakrifkan dalam "Modul Kandungan Dihasilkan dan Diganti CSS3." Menurut dokumen ini, kandungan yang dijana tidak dibenarkan di dalam elemen yang diganti. Ini menerangkan kegagalan :sebelum menggayakan pada SVG dalam contoh.

Penyelesaian Yang Mungkin: Elemen Pseudo :di luar

Walaupun kandungan yang dijana tidak disokong dalam elemen yang diganti, dokumen W3C dipetik mencadangkan penyelesaian: elemen pseudo di luar. Elemen pseudo ini meletakkan kandungan yang dijana di luar elemen yang diganti, dengan berkesan memintas sekatan. Malangnya, sokongan untuk :outside adalah terhad pada masa ini.

Kesimpulan

Menggayakan SVG sebaris menggunakan :sebelum atau :selepas tidak dapat dilakukan kerana pengehadan yang dikenakan ke atas elemen yang diganti. Untuk menangani isu ini, teroka kaedah alternatif seperti menggunakan kelas atau atribut untuk menambahkan elemen secara dinamik dengan penggayaan yang diingini.

Atas ialah kandungan terperinci Mengapakah CSS `:before` Tidak Berfungsi pada Elemen SVG Sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!