CSS :before dan :after

Pernahkah terpikirkan dalam benak kalian tentang menambahkan suatu kalimat pada sebuah paragraf menggunakan css? Jujur saja, tidak pernah terlintas dalam benak saya tentang hal semacam itu. Tapi, ternyata itu ada dan mungkin untuk dilakukan. Tertarik? Lanjutkan...

Yaitu before dan after. Fungsinya mirip dengan DOM yang innerHTML, tapi beda. Karena before dan after hanya menyisipkan kalimat pada awal atau akhir kalimat di dalam suatu tag. Seperti namanya, before berarti menyisipkan di awal kalmat dan after menyisipkan di akhir kalimat.
Sekarang, kita langsung praktik.

Ini adalah kalimat yang asli.

Kemudian css-nya.

<style type="text/css">
  p:before{
    content:"Ini kalimat dari before. ";
  }
</style>

 Hasilnya :

Ini kalimat before. Ini adalah kalimat yang asli.

Kalau yang after, tinggal ganti aja before menjadi after.

<style type="text/css">
  p:after{
    content:" Ini kalimat dari after.";
  }
</style>

Hasilnya :

Ini adalah kalimat yang asli. Ini kalimat dari after.

Digunakan secara bersamaan juga bisa.

<style type="text/css">
  p:before{
    content:"Ini kalimat dari before. ";
  }
  p:after{
    content:" Ini kalimat dari after.";
  }
</style>

Hasilnya :

Ini kalimat dari before. Ini adalah kalimat yang asli. Ini kalimat dari after.

Baik before ataupun after, kalimat yang akan kita sisipkan terletak pada content. Dan jangan lupa diapit tanda petik dua (""). Bagaimana kalau menyisipkan tag? Saya pernah mencobanya, tapi tidak berhasil. Karena fungsi css kan bukan untuk menyisipkan (mengedit) konten html. Tapi, bisa dilakukan dengan jQuery. Lain kali akan saya jelaskan yng menggunakan jQuery.