Memahami Css Pseudo Element :before dan :after

06:43:00
  
Memahami Css Pseudo Element :before dan :afterr - Mungkin sering kali kita mendengar mengenai Css :before dan :after dimana ini seringkali berperan dalam pembentukan element dalam DOM.
Memahami Css Pseudo Element :before dan :after
Css :before dan :after merupakan bagian dari Css Pseudo yang penjelasannya ada di artikel selanjutnya. Dan untuk sekarang kita hanya hanya akan berfokus pada pembahasan mengenai Css :before dan :after.

Apa Itu Css Pseude :before dan :after ?

Kata "pseudo" diambil dari bahasa Yunani yang berarti "Lies,False" dimana ini sama saja dengan membuat element kamuflase.

Pada dasarnya Css ini tidak akan mengubah element utama dan hanya sekedar menyisipkan element seperti hantu untuk memanipulasi element yang ditunjuk.

Dulu, Css pseudo element :before :after tidak ditampilkan pada page source, namun sekarang kita bisa melihat dimana letak element bayangan ini pada DOM yang kita buat.

Syntax dasar dari Css :before dan :after seperti ini
#box {}

#box:before {
  content:"#";
}

#box:after {
  content:".";
}


Dimana #box adalah element utama kita yang akan kita beri Css bayangan :before :after.

Misal kita buat element utama seperti ini

<div id="box">
Hello
</div>

Dan buat styling seperti ini
#box {
  width:100px;
  height:100px;
  background:#16a085;
  color:#fff;
  padding:20px;
  text-align:center;
}

Maka hasilnya akan seperti ini


Kemudian kita tambahkan elemen :before dan :after

#box:before {
  content:"#";
}

#box:after {
  content:">.<";
}


Hasilnya seperti ini



Dengan artian bahwa disini kita menambahkan element :sebelum dan :sesudah konten utama yang kita buat.

Jika kita lihat melalui developer tool di browser, maka kita bisa melihat disana ada elemen tambahan di dalam #box ,

<div id="box">
  ::before
  "
  Hello
  "
  ::after
</div>
Bisakah kita memberi styling khusus pada elemen :before dan :after ?

Bisa, namun perlu diingat bahwa element tersebut harus memiliki atribut content. Atau itu tidak akan bekerja.


Kemudian, kita juga tidak hanya bisa menambahkan text ke dalam atribut content, misal kita ingin menggunakan image, maka perintahnya seperti ini

#element:before {
   content: url(image.jpg);
}
Atau kita juga bisa meninggalkannya tetap kosong seperti ini

#element:before {
   content: "";
}


Semisal disini kita hanya ingin mengambil konten :before dan :after sebagai elemen bayangan berupa box element seperti saat kita ingin membuat manipulasi box shadow pada element utama.

Atau

a:after {
   content: attr(href);
}

Fungsi ini akan mengambil nilai atribut href yang terkandung di dalam tag a untuk ditampilkan kedalam content css pseudo element.

Browser yang mendukung :before dan :after :

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • Pretty much all mobile browsers.

Kesimpulan

Banyak hal bisa dilakukan oleh elemen bayangan :before dan :after yang bisa anda kembangkan sendiri untuk membuat desain website anda lebih atraktif dan interaktif.
Pseudo Element :before dan :after sangat powerfull dan didukung oleh semua browser modern dan sangat berguna untuk mempermudah kita dalam memanipulasi element DOM tanpa harus menambahkan elemen lebih yang akan merepotkan ketika terjadi perubahan komposisi pada DOM.

Dan semoga informasi ini bisa menambah setidaknya sedikit pengetahuan untuk yang membutuhkan.
Memahami Css Pseudo Element :before dan :after

: CS Team Tentang Kami Portfolio Kontak

CS Team adalah sebuah tim yang berfokus bekerja pada Blogger Design untuk meningkatkan pengalaman pada pengguna Website/ Blog berbasis Blogger.
Terimakasih telah membaca Memahami Css Pseudo Element :before dan :after diatas dan semoga bermanfaat.

Mau bantu share artikel diatas ... ?

Related Posts

Previous
Next Post »

Silahkan tanyakan apa yang ingin anda tanyakan dengan bahasa yang mudah dimengerti .
EmoticonEmoticon