Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

CSS Pseudo-Element Tahap Pertama

css pseudo element

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
  1. font
  2. color
  3. background
  4. word-spacing
  5. letter-spacing
  6. text-decoration
  7. vertical-align
  8. text-transform
  9. line-height
  10. clear
  1. font
  2. color
  3. background
  4. margin
  5. padding
  6. border
  7. text-decoration
  8. vertical-align (hanya jika "float" bernilai "none")
  9. text-transform
  10. line-height
  11. float
  12. clear

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 19 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!