Bolehkah CSS `:before` dan `:after` Pseudo-elements Style Inline SVGs?

Menggayakan SVG Sebaris dengan CSS :sebelum dan :selepas Elemen Pseudo: Dilema

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 sebagai Elemen Diganti

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.

Kandungan Dijana dan Elemen Diganti

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.

Pendekatan Alternatif

Untuk mengatasi had ini, pendekatan alternatif boleh diterokai:

• SVG Luaran dengan Elemen Pseudo: Pertimbangkan untuk memuatkan SVG sebagai fail luaran dan menggunakan CSS untuk memasukkan kandungan ke dalam elemen induk sebaliknya.
• Elemen Pembungkus: Balut SVG sebaris dalam div yang mengandungi dan gunakan elemen pseudo pada pembungkus dan bukannya SVG sendiri.

Penyelesaian Cadangan W3C: :di luar Pseudo-Element

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!