CSS :before dan :after - Pada artikel sebelumnya saya telah menjelaskan tentang Pseudo Class dan Pseudo Element. Untuk lebih jauh lagi mengenal
:before dan :after ini, saya ulas kembali bagaimana penggunaan pseudo elemen :before dan :after.:before atau ::before
Sebelum melanjutkan tentang penjelasan lebih jauh, kadang-kadang kita menemukan seseorang menggunakan
:before dan kadang ::before. Untuk lebih memahami penggunaan single colon dan double colon, kita lihat pada kode di bawah/*CSS2*/?.contoh:before{}.contoh:after{}.contoh:first-child{}/*CSS3*/.contoh::before{}.contoh::after{}.contoh:first-child{}
Singel colon (satu titik dua) digunakan untuk pseudo class dan pseudo elemen pada CSS2. Sedangkan pada CSS3 double colon hanya digunakan pada pseudo elemen.
Post By : Grizenzio Orchivillando
Apa arti :before dan :after?
Simple sebetulnya artinya,
:before digunakan untuk menambahkan elemen sebelum elemen utama. sedangkan:after digunakan untuk menambahkan elemen setelah elemen utama.Untuk contoh mudah, saya menuliskan urutan no tlp pada HTML :
<divid="noTlp">?<ul><li>234-456 (Anjasmara Prasetya)</li><li>234-678 (Adi Bing Slamet)</li><li>234-999 (Eyang Subur)</li></ul></div>
maka hasilnya akan menjadi seperti ini :
- 234-456 (Anjasmara Prasetya)
- 234-678 (Adi Bing Slamet)
- 234-999 (Eyang Subur)
Kemudian saya tambahkan elemen
:before seperti ini#noTlpulli:before{?content:"(021) ";}
Maka haslinya seperti ini :
- 234-456 (Anjasmara Prasetya)
- 234-678 (Adi Bing Slamet)
- 234-999 (Eyang Subur)
:before atau :after menggunakan efek :hover
Pseudo elemen
:before atau :after juga bisa disisipi dengan efek :hover. Contoh CSS dibawah yang sudah ditambahkan efek :hover.#box-me{?background:#f2f2f2;border:1px solid #ccc;padding:025px;font-size:35px;text-transform:uppercase;}#box-mep:after{content:" Sebel and Benci Kamu";display:none;}#box-mep:hover:after{display:inline;}
Kode HTML nya saya tulis
<divid="box-me">?<p>Aku Sangat</p></div>
Maka hasilnya seperti ini
AKU SANGAT
Studi Kasus
Post By : Grizenzio Orchivillando
 |
| Perhatikan blok biru, :before dan :after |
CSS untuk gambar di atas adalah
/*Blok Biru*/?#segi-delapan{width:100px;height:100px;background: blue;position: relative;}/*Merah Atas*/#segi-delapan:before{height:0;width:40px;content:"";position: absolute;border-bottom:30px solid red;border-left:30px solid white;border-right:30px solid white;}/*Orange Bawah*/#segi-delapan:after{height:0;width:40px;content:"";position: absolute;border-top:30px solid orange;border-left:30px solid white;border-right:30px solid white;margin:70px 000;}
Mengatur Posisi :before dan :after
CSS untuk kotak di atas adalah :
.kotak1{?background:red;width:100px;height:100px;position:relative;}.kotak1:before{content:"";background:green;width:40px;height:40px;position:absolute;}
CSS untuk kotak di atas adalah :
.kotak2{?background:red;width:100px;height:100px;position:relative;}.kotak2:before{content:"";background:green;width:40px;height:40px;position:absolute;bottom:100%;}.kotak2:after{content:"";background:purple;width:40px;height:40px;position:absolute;top:100%;right:0;}
Itu hanya sekedar sample sederhana.. silahkan sobat kembangkan lagi dan selamat berkreatifitas :)