Cara Mengubah Kandungan dalam CSS

Cara Mengubah Kandungan Dalam Css

Dalam aplikasi web, setiap pembangun berusaha untuk meningkatkan penampilan dan keseluruhan pengalaman pengguna dari setiap aspek. Kadangkala pembangun mahu melakukan perkara secara berbeza dan lebih baik daripada yang lain. Contohnya, menunjukkan teks pada sesuatu dan kemudian menukarnya kepada sesuatu yang lain mengikut kemas kini. Ini semua boleh dilakukan dengan bantuan sifat dan pemilih yang berbeza CSS.

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.