Pertama-tama, kita mulai perkenalan CSS Pseudo-Element
:before dan :after, lalu 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 sesudah elemen asli. Sebagai contoh, di sini Saya membuat sebuah kerangka objek sembarang menyerupai ini:
<h2 class='contoh'>Cinta</h2>Lalu kita buat aba-aba CSS menyerupai 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 menyerupai ini:
Cinta
Sekarang kita terapkan aba-aba CSS yang akan menyisipkan kata "Aku" di depan "Cinta" dan kata "Padamu" di belakang "Cinta". Bentuknya menyerupai ini:
h2.contoh:before { content:'Aku '; } h2.contoh:after { content:' Padamu'; }Setelah diterapkan maka akan menghasilkan tampilan menyerupai ini:
Cinta
Selain menyisipkan teks, CSS Pseudo-Element :before dan :after juga sanggup dipakai untuk menyisipkan objek lain, contohnya gambar. Caranya dengan menuliskan nilai properti content berupa url() menyerupai 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 menyerupai ini:
Cinta
: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 abjad pertama dalam sebuah elemen induk. Sebagai contoh, kita buat sebuah kerangka paragraf menyerupai ini:
<div id='paragraf'> Lorem ipsum dolor sit amet-amet jabang bayi oek-oek. Consetetur kampuang nan jauh di mato ambo-ambo tempe goreng yummy rasanya. Sed membisu 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 basi jigong. Kolor ijo naik haji gajarimo gazaba-gazaba. Ciluk bagong cus ciluk baaa!!! </div>Sekarang kita terapkan aba-aba CSS yang akan menawarkan warna merah pada baris teks pertama. Bentuknya menyerupai ini:
#paragraf:first-line {color:red;}Setelah diterapkan maka akan menghasilkan tampilan menyerupai ini:
Sekarang kita terapkan aba-aba CSS yang akan menawarkan warna jingga pada abjad pertama. Bentuknya menyerupai ini:
#paragraf:first-letter {color:orange;}Setelah diterapkan maka akan menghasilkan tampilan menyerupai ini:
Salah satu manfaat pseudo-element :first-letter yang paling terperinci ialah untuk pembuatan drop-cap » baca di sini
Catatan Tambahan
Properti-properti yang sanggup diterapkan pada pseudo-element :first-line dan :first-letter dibatasi pada properti-properti ini:
| :first-line | :first-letter |
|---|---|
|
|