DesignMagz

Pseudo-Element CSS :before dan :after

---

pseudo-element :before dan :after adalah sedikit sulap CSS yang berguna untuk memasukkan konten sebelum dan sesudah sebuah elemen. Konten yang ditambahkan via properti content ini juga bisa jadi semacem div cadangan yang bisa diberi styling dengan bebas. Bisa diberi padding, border, background — suka-suka lo lah!

Btw, IE ngga mendukung pseudo-element jadi mendingan buka Firefox atau Opera supaya bisa ngikutin artikel ini. Ya emang suxx, tapi kalo kata bule-bule, “it will degrade gracefully”.

Apa Sih Gunanya Pseudo-Elements?

Biar lebih jelas coba salin kode dibawah ini dan buka di browser. Atau liat aja contoh 1.

body:before {
  content: "Hello World!!";
  display: block;
  font-size: 5em;
  text-align: center;
}

Udah? Lumayan keren kan? Itu sih belom apa-apa, masih banyak lagi kegunaan praktis pseudo-element. Nyok kita liat…

Memasukkan Teks dan Objek

Pada dasarnya sih kamu bisa memasukkan string teks apa aja, caranya juga udah bisa kamu lihat di contoh 1. Tapi selain itu kamu juga bisa memasukkan objek lain lho (gambar misalnya), kamu tinggal memberikan URLnya.

.box:before {
  content: url(box-top.gif);
  display: block;
  ...
}
.box:after {
  content: url(box-bottom.gif);
  display: block;
  ...
}

Oia, gue lupa. Kalo divisualisasikan pseudo-element :before dan :after akan memasukkan konten di bagian ini:

<div class="box">
  <BEFORE>box-top.gif</BEFORE>

  <p>some content...</p>

  <AFTER>box-bottom.gif</AFTER>
</div>

Kode CSS diatas bisa dipake untuk bikin rounded corner tanpa markup tambahan. Liat sendiri hasilnya di contoh 2.

Penomeran Otomatis

Selain menampilkan teks statis, kamu juga bisa membuat counter atau penomeran otomatis pake fungsi counter(nama). Untuk permulaan kita coba dengan contoh yang simpel dulu: Kita akan menomeri contoh-contoh kode seperti yang akan kamu liat pada contoh 4 dengan label “Example 1″, “Example 2″, dst.

html {
  counter-reset: codenum;
}
.example:before {
  content: "Example " counter(codenum);
  counter-increment: codenum;
  display: block;
  ...
}

Fyi, semua blok kode pada halaman contoh dibungkus dalem div.example lho ya.

Oke, bagian ini mungkin perlu sedikit penjelasan. Perhatikan selector kedua, disini gue membuat sebuah counter dengan nama codenum yang diawali teks “Example”. Trus menjalankan penomerannya pake properti counter-increment.

Belom selesai! Properti counter-reset di selector pertama dipake untuk memulai penomeran dari nol (ini sebenernya bug fix supaya Firefox ngga ngebandel). Dan biarpun secara default penomeran dibuat dengan format angka, tapi diubah jadi bermacam style lain juga bisa.

Membuat Daftar Multi-Kolom

Sekarang ceritanya kamu harus membuat sebuah daftar urut (pake tag ol donk), yang secara visual harus terpisah jadi beberapa kolom. Tapi itu artinya kamu harus memisahnya jadi beberapa daftar dan penomeran ngga akan berurutan donk. Jadi gimana cara kita menghasilkan efek ini?

html {
  counter-reset: listnum;
}
ol li {
  list-style-type: none;
}
ol li:before {
  content: counter(listnum) ". ";
  counter-increment: listnum;
}

Dengan markup pada contoh 5 dan CSS diatas, daftar multi-kolom kita jadi deh! Keren kan?

Menampilkan Isi Atribut Tag HTML

Ada saatnya kita mau memberikan informasi tambahan tentang sebuah elemen. Contohnya atribut cite dari tag blockquote yang isinya biasanya informasi mengenai sumber kutipan yang sialnya kebanyakan browser ngga menampilkan isinya. Disinilah pseudo-element datang membantu, dengan fungsi attr().

blockquote[cite]:after {
  content: "Source: " attr(cite);
  display: block;
  ...
}

Gue juga pake attribute selector supaya hanya blok kutipan yang punya atribut cite yang diberi styling. Hasilnya liat di contoh 6.

Tooltip Dinamis Tanpa JavaScript

Tooltip JavaScript? Basi! Cobain tooltip murni CSS ini. Disini kita bermain dengan fungsi attr() untuk menampilkan isi atribut title sebuah link.

a[title]:hover:after {
  content: attr(title);
  display: block;
  width: auto;
  position: absolute;
  z-index: 1000;
  top: auto;
  left: auto;
  ...
}

Coba liat contoh 7 dan cek sourcenya kalo perlu. Eh, pake Opera aja ya soalnya ancur di Firefox :P

Progressive Enhancement

Masalah pasti ada. IE 6 jelas ngga ketolong dan developer IE 7 juga udah bilang ngga akan mendukung pseudo-element, jadi protesnya jangan sama gue. Pengguna Safari pada OS X sepertinya juga ngga bisa nikmatin fitur CSS yang satu ini, sori :)

Tapi inget aja kalo CSS dan browser-browser open-source seperti Firefox terus berkembang. Yang gue tunjukin disini kadang disebut dengan istilah Progressive Enhancement, ato praktik yang memanfaatkan sepenuhnya kemampuan browser-browser modern, sementara tetep menjamin pengalaman yang optimal untuk pengguna browser laen.

Sebelom pulang gue mo bilang terima kasih buat Ncus, Dental, Lino, Deny dan pastinya mas Pupung BP yang udah membantu pengetesan. Cheers!

Penulis:
Rizky Syajuli – 23 / Male / Jakarta
Web Desainer dan konsultan Search Engine Marketing.
http://blog.kometdigital.web.id/