CSS Pseudo-Element Tahap Pertama

Tabel Konten
  1. :before & :after 
  2. Cinta 
  3. Cinta 
  4. Cinta 
  5. :first-line & :first-letter 
  6. Catatan Tambahan 
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

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:

    h2 {
    text-align:center;
    }
    h2:before {content:"Aku ";display:none;   }
    h2:after  {content:" Padamu";display:none;}
    h2:hover:before,
    h2:hover:after {
    display:block;
    }

    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

      .tulishome:before {
      content:"Mister ";
      }
      .tulishome:after {
      content:" Ganteng";
      }
      • 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 -_-

Komentar telah ditutup.