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:

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