Bolehkah CSS Memasukkan Teks Secara Dinamik Sebelum Elemen Hanya Menggunakan Kelasnya?

Memasukkan Teks dengan CSS: Panduan

Sebagai pemula dalam CSS, memanipulasi pemformatan dan gaya teks ialah konsep yang biasa. Walau bagaimanapun, kadangkala anda menghadapi cabaran seperti memasukkan teks secara dinamik menggunakan CSS. Pertimbangkan senario ini:

Anda menyasarkan untuk memasukkan teks "Tugas Joe:" sebelum elemen dengan kelas "OwnerJoe". Sebaik-baiknya, anda lebih suka mencapai ini hanya menggunakan kelas elemen, tanpa mentakrifkan teks dalam elemen secara eksplisit.

Meneroka Pilihan

Pada mulanya, anda boleh menggunakan secara langsung termasuk teks dalam elemen:

<span>

Walau bagaimanapun, pendekatan ini kelihatan berlebihan kerana anda secara eksplisit nyatakan kedua-dua kelas dan teks yang berkaitan.

Memanfaatkan :sebelum

CSS2 memperkenalkan kelas pseudo :before, yang membolehkan anda memasukkan kandungan sebelum elemen. Dengan menggunakan ini, anda boleh mencapai matlamat anda seperti berikut:

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

Dengan menggunakan peraturan ini, apabila elemen dengan kelas "OwnerJoe" ditemui, teks "Joe's Task: " dipaparkan di hadapannya.

Alternatif: JavaScript

Sebagai alternatif, anda boleh menggunakan JavaScript untuk ini tugasan. Dengan menggunakan jQuery, anda boleh melaksanakan kod berikut:

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

Kod ini berulang melalui semua elemen dengan kelas "OwnerJoe" dan memasukkan teks "Joe's Task: " menggunakan JavaScript.

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