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 dab 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


segi delapan
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

O...ternyata begitu ya kang...
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...

Balas

sami atuh kang abdi ge otodidak.... hehehe :)

Balas

wah sayamah belum tahu kode-kode yang begituanmah,namun saya pelajari saja kang,ikut belajar disini,hatur nuhun tutorialna mantep.

Balas

lalu gmn carax bikin kotak dgn efek ujung terlipat sprti pd kotak hijau diatas kang??

Balas

belum ngerti si kang tapi nyimak ja :D

Balas

Masih dipelajari dulu ini Mas,kalau soal kodenya tinggal menerapkan saja tapi masih harus diteliti dulu biar paham :)

Balas

ini masih CSS aja ribet,,hahahay

Balas

Aku kok dari dulu gak bisa-bisa ya mas? dari dulu aku cuma baru bisa edit warna CSS aja. Tips untuk mudah mempelajari CSS itu gmana mas? Mohon sharenya yah .. :)

Oiya, Follow sukses mas, kalau berkenan, follow balik yah .. :)

Balas

belajar sedikit demi sedikit sob.. supaya jadi bukit :)

Balas

sama saja sob, pake efek :before

Balas

terus aja nyimak.. siapa tau jago kedepannya :)

Balas

silahkan diteliti dulu, biar ga puyeng :)

Balas

hehehhe.... ya gitu sob, semakin di dalemi semakin njelimet

Balas

ditunggu aja folbek nya sob... gimana ya cara belajarnya.. dasarnya dulu sih intinya

Balas

kalau masalah CSS saya mah buta Kang...pengin belajar tetapi malas. Penyakit susah dihilangkan dari saya ini

Balas

xixiix... belum butuh sob, biasanya karena kebutuhan :)

Balas

biasanya kalo yg lipatan begitu mainya di border-color dan border width
border-width:0 10px 10px 0;
border-color:transparent transparen green green;

kaga kerasa udah 2 jam saya cuma bikin ginian kaga jadi" kang,, @_@
untung ada postingan ini jadi lebih terang sekarang.. :D
TQ kang tutornya.. saya lagi butuh yang beginian :D

Balas

cucok sob.... hehhee.. tpai yang atas saya ga pake transparent, soalnya kalau pake transparent jadinya keliatan background hijau muda, pakenya ini
border-color:#fff #fff #658E15 #658E15;

Balas

mantebbbb pseudo element ini banyak aku manfaatin untuk mendesain blog :D

Balas

Ini juga saya kurang mengerti kang, padahal saya pengen mempelajarinya lebih dalam. Blog mbahqopet[dot]blogspot[dot]com juga template nya rata2pakai tutorial diatas.
Makasih tutornya kang is :)

http://www.ngeramput.com

Balas

iya sob... saya liat blognya mbahqopet.. keren

Balas

betul sob, pake pseudo elemen ini jadi tambah keyeeeen :)

Balas

ahha iya juga yaa..
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

Balas

keren blognya mbahkopet,,
ringan juga ya pake css sprites.. :)

Balas

kalau pengen lebig ringan lagi pake CSS Coca-cola :D

Balas

css mizone ajh kang biar tampilanya ga miring.. :D

Balas

kan sama thread comeng nya, cuman beda warna aja

Balas

Hehe,tambah pusing mas. .

mas caranya buat tulisan author dipojok atas komentar admin gimana ya..makasih

Balas

okk dh.. :)
punya saya soalnya udah keencrypt lupa di backup.. ahaha :D

Balas

Tambah lagi satu wawasan dari kang Ismet,,,,,
Makasih banget kang. Lagi pengen cakep2in desain web nih. Hehehe, Sempet bingung kemarin soal penggunaan After dan Before. :D

Balas

Lier geningan nya kang :D

Balas

lumayan buat manipulasi

Balas

simpan kode ini sebelum ]]></b:skin>
.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}

Balas

moga webnya tambah cakep deh... :)

Balas

muntang kang lieur mah.. bilih tijongklok :D

Balas

mantap lah mas setiap postingannya, saya sering gk ada ide buat postingan haha.

Balas

cari ide itu yang susah ya sob.. :)

Balas

ohhh . gitu ternyata. saya baru mengerti gan . makasih kang tas infonya semua yng ada disini memang bermutu kang

Balas

makasih sob... semoga bermanfaat

Balas

Makasih ilmu Kang... betul2 utk pemula seperti ane nih... sips..sips..sips..

Balas

sama2 sob.. semoga bermanfaat

Balas

Nah, itu dia kang, saya harus mulai dari mana ya ?? hehe kode2nya banyak2 dan aneh2 sih ...

Balas

otodidak itu asik om!!.. ^_^

Balas

cuman KANG ISMET yang ngerti perasaan blogger indonesia .. ^_^ .. mantapp kang .. ameng nyak ka blog abdi .. http://blog.riandesign.web.id , nyungkeun kripik sareng saran na oge .. hatur nuhun .

Balas

hehehe... nuhun kang.. atos amengan bieu.. mantap blogna

Balas

HORE Akhirnya Nemu juga ..
Makasih bang ^_^
visit back yah..
www.anbin.us

Balas

saya waktu mau bikin postingan home jadi kayak contoh gambar ini http://i.imgur.com/IHyRzUX.jpg malah gak bisa kang, sarannya donk

Balas

maksudnya postingan home gimana ya?

Balas

posttingan yang ada dihomepag (tempat post)

Balas

iya saya ga ngeri gimana? :)

Balas

Master sareng Master parebut otodidak heuhhhh
Berarti nu pinter mah abi nya Kang hkhkhk
Soal nya, tinggal aem sih sawios teu ngarti oge...
Hatur nuhun Kang Ismet, sudah menerangkan arti artikel di atas. dia ajar lagi nih saya Kang.

Balas

Nyimak lagi Kang, pengetahuan baru, sementara saya
Kurang paham nih, baca dulu tar sudah paham coba
Bongkar pasang template lagi. terima kasih Kang

Balas

wihihi harus belajar css nih, mumpung mantep" artikel nya.
n sekarang lumayan ngerti tentang css,. hihi :D

Balas

Poskan Komentar


×
Chat