Bolehkah CSS :sebelum dan :selepas Pemilih Memasukkan Kandungan HTML?

Memasukkan HTML Menggunakan CSS :sebelum dan :selepas Pemilih

Dalam CSS, elemen pseudo :before dan :after membenarkan anda menambah kandungan sewenang-wenangnya sebelum atau selepas sesuatu elemen tanpa mengubah suai kandungan sebenar. Walau bagaimanapun, adalah penting untuk mengambil perhatian batasan pendekatan ini.

Cabaran: Menambah HTML Melalui :before dan :after

Pertimbangkan kod berikut:

li.first div.se_bizImg:before {
    content: "<h1>6 Businesses Found <span class="headingDetail">(view all)</span>
</h1>";
}

Niat coretan ini adalah untuk memasukkan tajuk HTML ke dalam DOM menggunakan :before unsur pseudo. Walau bagaimanapun, seperti yang anda mungkin sedar, kod ini tidak berfungsi.

Sekatan Kandungan dengan :sebelum dan :selepas

Isu utama di sini terletak pada sifat kandungan :sebelum dan :selepas pemilih, yang hanya menerima kandungan teks. HTML, sebagai bahasa penanda, tidak boleh disisipkan terus menggunakan sifat ini.

Pendekatan Alternatif

Untuk mencapai hasil yang diinginkan, pendekatan alternatif diperlukan. Pertimbangkan untuk menggunakan JavaScript atau jQuery untuk memanipulasi DOM secara langsung dan memasukkan penanda HTML. Pilihan lain ialah menggunakan enjin templat yang boleh menjana HTML yang diperlukan secara dinamik.

Pertimbangan Tambahan

• Penggunaan " di dalam blok " dalam kod anda adalah tidak betul. Pastikan penyarangan tanda petikan yang betul (class='headingDetail').
• Menggunakan kandungan untuk menambah kod HTML boleh membawa kepada gelung tak terhingga di mana kandungan ditambah secara rekursif dalam dirinya sendiri.

Atas ialah kandungan terperinci Bolehkah CSS :sebelum dan :selepas Pemilih Memasukkan Kandungan HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!