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:
Cinta
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:
Cinta
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:
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 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:
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!!!
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:
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!!!
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 |
|---|
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
| - font
- color
- background
- margin
- padding
- border
- text-decoration
- vertical-align (hanya jika "float" bernilai "none")
- text-transform
- line-height
- float
- clear
|
Labels: CSS, Dasar
