Manakala elemen pseudo CSS seperti :sebelum dan :selepas biasanya digunakan untuk penggayaan Elemen HTML, aplikasi mereka pada SVG sebaris menimbulkan cabaran yang unik. Memahami nuansa elemen yang diganti dan kandungan yang dijana adalah penting untuk menyelesaikan isu ini.
SVG Sebaris biasanya dianggap sebagai elemen yang diganti dalam HTML. Elemen yang digantikan ialah elemen yang menggantikan teks dengan objek luaran, seperti imej atau video. Ia dipaparkan sebagai satu unit dan tidak boleh mengandungi sebarang nod teks.
Perbezaan ini penting kerana kandungan yang dihasilkan CSS, seperti yang dicipta oleh :before dan :after pseudo-elements, hanya boleh digunakan pada elemen sebaris . Elemen sebaris ialah elemen yang mengalir bersama teks sekeliling dan ia boleh mengandungi nod teks.
Css :sebelum dan :selepas elemen pseudo mencipta kandungan terjana, yang dimasukkan ke dalam elemen yang dipadankan oleh pemilih. Walau bagaimanapun, memandangkan SVG sebaris digantikan dengan elemen, ia tidak boleh menjana kandungan yang dilampirkan padanya. Ini kerana kandungan ditambah di dalam elemen dan elemen yang diganti tidak membenarkan kandungan bersarang.
Untuk mengatasi had ini, pendekatan alternatif boleh diterokai:
Dalam dokumen W3C, "Modul Kandungan Dihasilkan dan Diganti CSS3", elemen pseudo yang dipanggil :luar diperkenalkan. :outside membolehkan kandungan yang dijana diletakkan di luar elemen diganti yang berkaitan, yang berpotensi menyediakan penyelesaian untuk menggayakan SVG sebaris. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa ciri ini belum dilaksanakan secara meluas dan mungkin tidak disokong dalam semua penyemak imbas.
Atas ialah kandungan terperinci Bolehkah CSS `:before` dan `:after` Pseudo-elements Style Inline SVGs?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!