Bolehkah CSS Memasukkan Teks Secara Dinamik?

Memasukkan Teks Menggunakan CSS Afterthoughts

Dalam CSS, anda boleh mengubah suai penggayaan dan pemformatan teks dengan mudah. Walau bagaimanapun, adakah anda tahu bahawa ia juga mungkin untuk memasukkan teks menggunakan CSS?

Pertimbangkan contoh berikut: anda mahu teks "mendamaikan semua entri" muncul sebagai "Tugas Joe: mendamaikan semua entri" apabila ia milik kelas "OwnerJoe." Walaupun anda boleh menambah teks "Tugas Joe:" secara manual, itu akan menjadi berlebihan dan tidak cekap.

Penyelesaian CSS

Untuk mencapai ini semata-mata dengan CSS, anda boleh menggunakan yang ::sebelumnya pseudo-element:

.OwnerJoe::before {
  content: "Joe's Task: ";
}

Coretan CSS ini akan memasukkan teks yang ditentukan sebelum sebarang elemen dengan kelas "OwnerJoe." Walau bagaimanapun, ambil perhatian bahawa ini memerlukan penyemak imbas yang menyokong CSS2 (termasuk semua penyemak imbas utama dan IE8 ).

Alternatif: Menggunakan JavaScript

Jika anda lebih suka penyelesaian berasaskan JavaScript , anda boleh menggunakan jQuery untuk memasukkan teks secara dinamik:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

Kod JavaScript ini akan memasukkan elemen span yang mengandungi teks "Tugas Joe:" sebelum setiap elemen dengan kelas "OwnerJoe."

ListItem with Text Bullet

Mengenai soalan anda tentang menggunakan blok teks sebagai list bullet, ia mungkin tetapi memerlukan penyelesaian CSS yang lebih kompleks. Satu pendekatan melibatkan mencipta titik tumpu tersuai menggunakan teknik CSS3 seperti imej latar belakang dan elemen pseudo.

Ingat bahawa walaupun CSS boleh menjadi alat yang berkuasa untuk menggayakan dan memanipulasi dokumen, ia boleh mempunyai had apabila melibatkan perkara yang lebih kompleks tugas seperti memasukkan teks dinamik. Dalam kes sedemikian, JavaScript atau gabungan CSS dan JavaScript selalunya lebih sesuai.

Atas ialah kandungan terperinci Bolehkah CSS Memasukkan Teks Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!