::before dan ::after
Melalui kelas ini, kamu diajak untuk:
- Memahami penerapan ::before/::after
- Memadukan elemen ::before/::after dengan pseudo-class.
Kondisi
Interaksi dalam bahasa pemrograman erat kaitannya dengan kondisi. CSS3 tidak memiliki kapasitas untuk menjalankan logika pemrograman sekaya JavaScript. Maka, JavaScript akan menjadi tempat mengadu ketika web developer membutuhkan interaksi yang lebih kompleks.
Namun, ada beberapa interaksi sederhana yang tidak membutuhkan bantuan JavaScript. Misalnya perubahan warna saat menekan teks/tombol, bentuk yang berotasi, hingga memunculkan efek tertentu.
Content
Elemen before/after membutuhkan sebuah selector khusus bernama content. Selector ini bertujuan untuk
div::after {
content: "text";
}Pseudo-element membantu mengatur kondisi setiap interaksi user. Ada berbagai jenis yang bisa dipakai. Mari kita rinci penjelasannya.
String
Tambahkan tulisan atau unicode ke dalam element yang dipilih.
content : “tulisan”;Image
Menambahkan ikon atau gambar baru dengan menyimpan url.
content : url(filepath-gambar.jpg);Namun perlu diingat bahwa image ini tidak bisa diresize.
Clearfix
Untuk membuat elemen baru, gunakan konten kosong.
content : "";Counter
Untuk melakukan styling pada list, gunakan metode counter.
content : counter(item);