Tulisan ini akan membimbing anda tentang menukar kandungan dalam CSS.
Bagaimana untuk Mengubah Kandungan dalam CSS?
Untuk menukar kandungan dalam CSS, kami akan menggunakan kaedah di bawah:
Mari kita lalui setiap kaedah satu demi satu!
Kaedah 1: Gunakan ::selepas Pemilih dengan Harta kandungan untuk Mengubah Kandungan dalam CSS
' ::selepas ' pemilih meletakkan kandungan yang ditentukan selepas elemen HTML menggunakan CSS ' kandungan ” harta benda. Operasi ini membantu dalam menambah kandungan pada elemen yang dipilih. Selain itu, ' paparan ” harta boleh digunakan untuk menyembunyikan kandungan sedia ada.
Mari kita lihat contoh di bawah untuk memahami cara menukar kandungan dalam CSS menggunakan pemilih ::after.
Contoh
Berikut ialah halaman HTML kami dengan teks “ Selamat Pagi!!! ”. Mari gantikan kandungan yang ditambahkan:
Pada masa ini, kami telah menambah ' “ teg dengan teks dalam bahagian badan fail HTML kami:
< hlm > Selamat Pagi!!! < / hlm >Dalam fail CSS kami, kami kini akan menggunakan pemilih ::after sebagai “ badan::selepas ” dan gunakan “ kandungan ” harta dengan nilai “ Selamat petang ” di dalam definisinya. Akibatnya, pemilih CSS akan meletakkan teks sejurus selepas teks bertulis. Akhir sekali, sembunyikan teks sedia ada menggunakan ' paparan ” harta dan tetapkan nilainya kepada “ tiada ”:
< gaya >badan::selepas {
kandungan : 'Selamat petang' ;
}
hlm {
paparan: tiada;
}
< / gaya >
Sekarang, simpan fail HTML anda dan bukanya dengan mudah pada penyemak imbas atau gunakan “Pelayan Langsung ” untuk tujuan yang sama:
Seperti yang anda lihat, kandungan telah berjaya ditukar menggunakan ::selepas pemilih CSS:
Kaedah 2: Gunakan ::before Selector dengan Property kandungan untuk Mengubah Kandungan dalam CSS
Dalam CSS, ' ::sebelum ini ” pemilih digunakan untuk membuat kandungan muncul tepat sebelum kandungan sedia ada unsur. Ia boleh digunakan dalam kombinasi dengan ' kandungan ” untuk menambah kandungan baharu pada elemen yang dipilih.
Contoh
Nyatakan ::sebelum pemilih betul-betul selepas badan sebagai “ badan::sebelum ini ”. Ini akan meletakkan kandungan baharu sebelum kandungan sedia ada. Ambil perhatian bahawa semua sifat lain kekal sama seperti dalam contoh sebelumnya:
< gaya >badan::sebelum ini {
kandungan : 'Selamat petang' ;
}
hlm {
paparan: tiada;
}
< / gaya >
Pengeluaran
Kami telah menerangkan kaedah yang berbeza untuk menukar kandungan dalam CSS.
Kesimpulan
Untuk menukar kandungan, ' ::selepas ” dan “ ::sebelum ini 'Pemilih CSS digunakan dengan ' kandungan ” harta benda. Dalam pendekatan pertama, teks yang ditentukan ditambah selepas elemen yang dipilih, manakala pemilih CSS kedua berfungsi sebaliknya. Selain itu, ' paparan ” harta boleh digunakan untuk menyembunyikan kandungan sedia ada unsur. Beginilah cara kandungan diubah sepenuhnya dalam CSS. Kami telah merangkumi dua kaedah untuk menukar kandungan dalam CSS.