Menggunakan :before dan :after dalam CSS

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.

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 :

<div id="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

#noTlp ul li: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:0 25px;
font-size:35px;
text-transform:uppercase;
}
#box-me p:after{
content:" Sebel and Benci Kamu";
display:none;
}
#box-me p:hover:after{
display:inline;
}

Kode HTML nya saya tulis

<div id="box-me">
<p>Aku Sangat</p>
</div>

Maka hasilnya seperti ini

Aku Sangat

Studi Kasus

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 0 0 0;
}

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;
}

Gunakan position:relative untuk elemen utama dan position:absolute untuk :before dan :after. Karena position:relative merupakan tempat dari position:absolute supaya ga lari kemana2... :)

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 :)