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

Untuk contoh mudah, saya menuliskan urutan no tlp pada HTML :
Kemudian saya tambahkan elemen
CSS untuk gambar di atas adalah
CSS untuk kotak di atas adalah :
CSS untuk kotak di atas adalah :
Itu hanya sekedar sample sederhana.. silahkan sobat kembangkan lagi dan selamat berkreatifitas :)
: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 iniAku 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 :)
54 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
n sekarang lumayan ngerti tentang css,. hihi :D
Kurang paham nih, baca dulu tar sudah paham coba
Bongkar pasang template lagi. terima kasih Kang
Makasih bang ^_^
visit back yah..
www.anbin.us
Makasih banget kang. Lagi pengen cakep2in desain web nih. Hehehe, Sempet bingung kemarin soal penggunaan After dan Before. :D
mas caranya buat tulisan author dipojok atas komentar admin gimana ya..makasih
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://2.bp.blogspot.com/-uXoHR9FYyVA/UOc8HiPm5WI/AAAAAAAACf0/UBdO-FlCdXI/s000/author.png);width:36px;height:36px}
Makasih tutornya kang is :)
http://www.ngeramput.com
ringan juga ya pake css sprites.. :)
Oiya, Follow sukses mas, kalau berkenan, follow balik yah .. :)
border-width:0 10px 10px 0;
border-color:transparent transparen green green;
kaga kerasa udah 2 jam saya cuma bikin ginian kaga jadi" kang,, @[email protected]
untung ada postingan ini jadi lebih terang sekarang.. :D
TQ kang tutornya.. saya lagi butuh yang beginian :D
border-color:#fff #fff #658E15 #658E15;
kalau yg transparan saya pake buat judul itu,, soalnya pake margin left n right minus, jadinya judul keluar dari elemen yang membungkusnya.. hihi..
lagi belajar pseoudo ni buat modif tampilan sekarang, abisnya dh banyak yg niru desain judulnya.. hehehe.. :D
oya kang boleh pake thread komenya ga kang,, kalo modif thread koment masih buta saya.. :D
punya saya soalnya udah keencrypt lupa di backup.. ahaha :D
Saya nemuin kode seperti itu ketika membuat kotak pesan komentar di atas formulir komentar itu, saya hanya bisa merubah warna bordernya tanpa mengerti artinya dari kode itu hehehehe...maklum otodidak kang ....
Makasih penjelasannya ini...dapet ilmu baru lagi...