Artikel ini akan memandu Anda tentang mengubah konten di CSS.
Bagaimana Mengubah Konten di CSS?
Untuk mengubah konten dalam CSS, kami akan menggunakan metode di bawah ini:
Mari kita bahas setiap metode satu per satu!
Metode 1: Gunakan ::after Selector dengan properti konten untuk Mengubah Konten di CSS
' ::setelah ” selektor menempatkan konten yang ditentukan setelah elemen HTML menggunakan CSS “ isi ' Properti. Operasi ini membantu dalam menambahkan konten ke elemen yang dipilih. Selain itu, “ menampilkan Properti ” dapat digunakan untuk menyembunyikan konten yang ada.
Mari kita lihat contoh di bawah ini untuk memahami cara mengubah konten di CSS menggunakan pemilih ::after.
Contoh
Berikut adalah halaman HTML kami dengan teks “ Selamat pagi!!! ”. Mari kita ganti konten yang ditambahkan:
Saat ini, kami telah menambahkan “ “ tag dengan teks di bagian tubuh file HTML kami:
< p > Selamat pagi!!! < / p >Dalam file CSS kita, sekarang kita akan menggunakan pemilih ::after sebagai “ tubuh::setelah ” dan gunakan “ isi ”properti dengan nilai” Selamat malam ” di dalam definisinya. Akibatnya, pemilih CSS akan menempatkan teks tepat setelah teks tertulis. Terakhir, sembunyikan teks yang ada menggunakan ' menampilkan ” properti dan atur nilainya menjadi “ tidak ada ”:
< gaya >tubuh::setelah {
isi : 'Selamat malam' ;
}
p {
tampilan: tidak ada;
}
< / gaya >
Sekarang, simpan file HTML Anda dan buka dengan mudah di browser atau gunakan “Server Langsung ” untuk tujuan yang sama:
Seperti yang Anda lihat, konten telah berhasil diubah menggunakan pemilih ::after CSS:
Metode 2: Gunakan ::before Selector dengan properti konten untuk Mengubah Konten di CSS
Di CSS, ' ::sebelum ” selektor digunakan untuk membuat konten muncul tepat sebelum konten elemen yang ada. Ini dapat digunakan dalam kombinasi dengan ' isi ” properti untuk menambahkan konten baru ke elemen yang dipilih.
Contoh
Tentukan pemilih ::before tepat setelah body sebagai “ tubuh::sebelum ”. Ini akan menempatkan konten baru sebelum konten yang ada. Perhatikan bahwa semua properti lainnya tetap sama seperti pada contoh sebelumnya:
< gaya >tubuh::sebelum {
isi : 'Selamat malam' ;
}
p {
tampilan: tidak ada;
}
< / gaya >
Keluaran
Kami telah menjelaskan berbagai metode untuk mengubah konten di CSS.
Kesimpulan
Untuk mengubah konten, “ ::setelah ' dan ' ::sebelum ” Selektor CSS digunakan dengan “ isi ' Properti. Pada pendekatan pertama, teks yang ditentukan ditambahkan setelah elemen yang dipilih, sedangkan pemilih CSS kedua bekerja sebaliknya. Apalagi, “ menampilkan Properti ” dapat digunakan untuk menyembunyikan konten elemen yang ada. Ini adalah bagaimana konten diubah sepenuhnya dalam CSS. Kami telah membahas dua metode untuk mengubah konten dalam CSS.