CSS Pseudo-Element Tahap Pertama
Tugasnya hampir sama dengan CSS Pseudo-Classes. Di sini, sebuah pseudo-element dapat bertugas sebagai penyeleksi sebagian elemen secara otomatis atau sekedar menciptakan elemen palsu tanpa menuliskan kode HTML (di sini yang hebat!).
Pertama-tama, kita mulai perkenalan CSS Pseudo-Element :before
dan :after
, kemudian dilanjutkan dengan pseudo-element :first-line
dan :first-letter
:before & :after
Pseudo-element :before
berfungsi untuk menyisipkan elemen palsu sebelum elemen asli, sedangkan pseudo-element :after
berfungsi untuk menyisipkan elemen palsu setelah elemen asli. Sebagai contoh, di sini Saya membuat sebuah kerangka objek sembarang seperti ini:
<h2 class='contoh'>Cinta</h2>
Lalu kita buat kode CSS seperti ini:
h2.contoh {
font:bold 22px Verdana, Arial, Sans-Serif;
text-align:center;
color:#000;
text-shadow:1px 1px 0 #fff,1px 1px 3px #000;
}
Normalnya, kerangka objek tersebut akan meghasilkan tampilan seperti ini:
Sekarang kita terapkan kode CSS yang akan menyisipkan kata "Aku" di depan "Cinta" dan kata "Padamu" di belakang "Cinta". Bentuknya seperti ini:
h2.contoh:before {
content:'Aku ';
}
h2.contoh:after {
content:' Padamu';
}
Setelah diterapkan maka akan menghasilkan tampilan seperti ini:
Selain menyisipkan teks, CSS Pseudo-Element :before
dan :after
juga dapat digunakan untuk menyisipkan objek lain, misalnya gambar. Caranya dengan menuliskan nilai properti content
berupa url()
seperti ini:
h2.contoh:before {
content:url('images/smileyvault-cute-big-smiley-animated-002.gif');
}
h2.contoh:after {
content:url('images/cute_smiley30.gif');
}
Setelah diterapkan maka akan menghasilkan tampilan seperti ini:
:first-line & :first-letter
Pseudo-element :first-line
berfungsi untuk menyeleksi teks pada baris pertama dalam sebuah elemen induk, sedangkan pseudo-element :first-letter
berfungsi untuk menyeleksi huruf pertama dalam sebuah elemen induk. Sebagai contoh, kita buat sebuah kerangka paragraf seperti ini:
<div id='paragraf'>
Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consetetur kampuang nan jauh di mato ambo-ambo tempe goreng enak rasanya. Sed diam nonumy ummi-ummi eirmod tempor kuch-kuch hota hai. Poligami nehi-nehi aishiteru mereketehe hajimeteiru. Ut labore et dolore et rupiahe et mahal banget et gak punya duit. Ciluk babara hotras bagong. Bang-bang-tut bau jigong. Kolor ijo naik haji gajarimo gazaba-gazaba. Ciluk bagong cus ciluk baaa!!!
</div>
Sekarang kita terapkan kode CSS yang akan memberikan warna merah pada baris teks pertama. Bentuknya seperti ini:
#paragraf:first-line {color:red;}
Setelah diterapkan maka akan menghasilkan tampilan seperti ini:
Sekarang kita terapkan kode CSS yang akan memberikan warna jingga pada huruf pertama. Bentuknya seperti ini:
#paragraf:first-letter {color:orange;}
Setelah diterapkan maka akan menghasilkan tampilan seperti ini:
Salah satu manfaat pseudo-element :first-letter
yang paling jelas adalah untuk pembuatan drop-cap » baca di sini
Catatan Tambahan
Properti-properti yang bisa diterapkan pada pseudo-element :first-line
dan :first-letter
dibatasi pada properti-properti ini:
:first-line | :first-letter |
---|---|
|
|
19 Komentar
Unknown
belajar CSS sedikit demi sedikit lewat tukang pos *hompimpa*. . :D
Piyen
banyak belajardari sini... dan jadi lebih mengenal css ini...
Musa Khairul Umam
Oh.. jadi begitu ya,thanks dah mau nunjukin saya penjelasannya :D
Unknown
Makasih ilmunya nas taufik :)
Putra
kalau dipakai di efek hover gmn yah??
pengen tau caranya?? :D
Taufik Nurrohman
@Alam Perwira Mungkin maksudnya begini:
Demo: http://jsfiddle.net/tovic/PxGaY/
Putra
@Taufik Nurrohmanwaaaw.. cobaaa aaaaah..
thaaankss besar ilmunya mas :) mancaaaaaap
uki
Wew,ini yang aku cari-cari.Thank Taufik :-bd dan Alam \o/ sudah bantu cari di hompimpa.
Unknown
tanya mas
kalo sebuah gambar hover kemudian berputar. nah pas selesai gambar berputar nanti keluar konten misal tulisan dengan lebar dan tinggi tertentu. Mirip tanda tanya yang berputar di blog ini kemarin waktu pemberitahuan kalo blog demo kehapus. itu gimana mas? apa bisa menggunakan after dan before ini?
maaf banyak nanya :D
Taufik Nurrohman
Itu masuknya ke CSS Transisi. Efek antre dibuat menggunakan delay transisi ⇒ http://jsfiddle.net/tovic/43eG7/21/
Unknown
hnnnnnnnnnnahhh itu yang ak maksud \o/. duuh pinter bener nih mas taufik, makannya apa sih,,,ha ha ha. saya coba dulu mas, makasiiiiii :-bd
Unknown
Jadinya kok gini mas?? http://jsfiddle.net/Satyapradana/Ge4Kb/2/embedded/result/
#buru-buru kabur **p
Taufik Nurrohman
Bingung. Kalau Saya buat dari awal mungkin jadi, tapi kalau mengedit ini ribet.
Unknown
Itu sengaja mas, polos banget mas taufik ini...
Unknown
he he cuma becanda mas, itu CSS Transisi yang mas taufik buat saya modif.
btw thanks berat bantuannya :-bd :-bd :-bd
Damar Zaky
WAAooooowww pengen belajar kayak gini, tapi error di blog saya, selalu :before dan :after sering tidak bekerja, bisa check blog saya nggak mas?
http://damarzaky.blogspot.com
Taufik Nurrohman
Damar Zaky
Ok deh makasih, mau nanya lagi kalo memberi nomor urut pada blog post gimana ya caranya?..... saya pengen coba aja hehe...
Unknown
Waduh masih bingung -_-