Atribut kandungan digunakan dalam CSS untuk memasukkan kandungan yang dihasilkan ke dalam elemen pseudo. Peranan terasnya adalah untuk menambah kandungan visual dalam struktur bukan HTML, seperti teks, simbol, gambar, atau kaunter automatik. 1. Masukkan teks atau simbol: boleh digunakan untuk menambah label atau ikon, seperti "Nota:" atau aksara Unicode; 2. Tambah imej atau kaunter: menyokong memasukkan gambar dan melaksanakan penomboran automatik; 3. Kawalan Gaya: Gaya seperti fon, warna dan susun atur boleh digunakan untuk kandungan yang dihasilkan; 4. Penggunaan Sekatan: Perlu dielakkan untuk menggunakan maklumat kritikal atau sejumlah besar teks untuk mengelakkan mempengaruhi akses dan penyelenggaraan.

Harta content dalam CSS adalah penting ketika bekerja dengan unsur-unsur pseudo seperti ::before dan ::after . Tujuan utamanya ialah memasukkan kandungan yang dihasilkan ke dalam kandungan pokok dokumen yang tidak hadir dalam markup HTML sebenar tetapi muncul secara visual pada halaman.

Mengapa menggunakan content dengan elemen pseudo?

Pseudo-elements seperti ::before dan ::after tidak berbuat banyak sendiri. Jika anda cuba gaya mereka tanpa menggunakan harta content , mereka tidak akan muncul sama sekali. Itu kerana penyemak imbas mengabaikan unsur-unsur pseudo kecuali ada sesuatu yang perlu dipaparkan. Harta content memberi anda cara untuk menentukan apa yang "sesuatu" itu.

Memasukkan teks atau simbol

Salah satu penggunaan content yang paling biasa ialah memasukkan teks atau aksara khas sebelum atau selepas elemen. Ini boleh membantu menambah label, ikon, atau elemen hiasan tanpa mengubah HTML.

Contohnya:

 p :: sebelum {
  Kandungan: "Nota:";
  Font-Weight: Bold;
}

Ini menambah perkataan "nota:" dengan berani pada permulaan setiap perenggan. Anda boleh menggunakannya untuk menyerlahkan amaran, tip, atau mesej berulang yang lain.

Anda juga boleh menggunakan aksara unicode atau emojis:

 li :: sebelum {
  Kandungan: "\ 2713"; / * Tanda semak unicode */
  margin-kanan: 5px;
}

Perlu diingat:

• Kandungan yang dimasukkan tidak boleh dipilih atau dicari oleh pengguna.
• Ia tidak boleh digunakan untuk maklumat penting yang mempengaruhi kebolehcapaian atau SEO.

Menambah gambar atau kaunter

Selain teks, anda boleh menggunakan content untuk memasukkan imej atau membuat kaunter automatik.

Untuk memasukkan gambar:

 Div.Banner :: Selepas {
  Kandungan: URL ("Icon-star.png");
}

Ini meletakkan imej di sebelah spanduk tanpa memerlukan tag <img alt="Apakah tujuan harta kandungan dalam elemen pseudo?" > . Ia berguna untuk ikon kecil atau grafik hiasan.

Untuk kaunter:

 badan {
  Kaunter-reset: seksyen;
}

H2 :: Sebelum {
  Kaunter-Peningkatan: Seksyen;
  Kandungan: "Seksyen" Kaunter (Seksyen) ":";
}

Sekarang setiap tajuk secara automatik akan dihitung sebagai "Seksyen 1", "Seksyen 2", dan lain-lain. Ini bagus untuk dokumentasi atau kandungan jangka panjang di mana anda ingin mengatur bahagian secara dinamik.

Styling yang dihasilkan kandungan

Sebaik sahaja anda telah menambah kandungan melalui content , anda boleh gaya ia seperti elemen lain. Anda boleh memohon margin, warna, fon, dan juga kedudukan.

Contohnya:

 blockquote :: sebelum {
  Kandungan: Open-Quote;
  saiz font: 2EM;
  warna: kelabu;
}

Ini menambah tanda petikan gaya sebelum setiap blockquote. Nilai biasa termasuk:

• open-quote / close-quote
• "string"
• url(image.jpg)
• counter(name)

Anda juga boleh menetapkan sifat seperti display , position , atau float untuk mengawal bagaimana kandungan yang dihasilkan berkelakuan secara visual.

Apabila tidak menggunakannya

Walaupun content berkuasa, ia lebih baik digunakan dengan berhati -hati. Elakkan memasukkan ketulan besar teks atau apa -apa yang menyampaikan makna kritikal, kerana pembaca skrin tidak boleh mentafsirkannya secara konsisten. Juga, elemen pseudo yang terlalu banyak boleh membuat gaya lebih sukar untuk dikekalkan.

Singkatnya, fikirkan content sebagai alat untuk peningkatan visual dan bukannya kandungan struktur.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Apakah tujuan harta kandungan dalam elemen pseudo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!