::before dan ::after

Sampai babak ini, CSS hanya menata elemen yang ada di HTML. Pseudo-element ::before dan ::after mengubahnya: keduanya membuat kotak baru dari CSS dan menaruhnya di awal atau akhir isi sebuah elemen, seolah anak pertama atau anak terakhir yang tidak pernah ditulis di markup. Inilah mesin di balik tanda kutip dekoratif, ikon pada bullet, dan badge angka pada ikon keranjang. Pada chapter ini kita mempelajari syarat mutlaknya — property content — lalu menyusun penggunaan-penggunaan klasiknya.

Kotak yang Dibuat dari CSS #

::before menyisipkan kotak sebagai isi pertama, ::after sebagai isi terakhir dari elemen yang dipilih. Syaratnya satu dan mutlak: property content harus ada. Tanpa content, kotak tidak dirender sama sekali, sekecil apa pun gaya lainnya:

.pembatas-bab::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background-color: #1f6f54;
  border-radius: 2px;
  margin-bottom: 12px;
}

Nilai content: "" — string kosong — adalah pola paling umum untuk dekorasi: isinya memang kosong, yang kita butuhkan hanyalah kotaknya agar bisa diberi ukuran, warna, dan bayangan.

Garis hijau di atas judul demo berikut dirender oleh ::before, bukan ditulis di HTML:

Kotak hasil pseudo-element berperilaku seperti kotak inline secara bawaan, mengalir menempel dengan teks. Bila kotaknya perlu mengambil satu baris penuh — seperti garis pembatas di atas — beri display: block.

Kotak ini juga mewarisi property yang dapat diwariskan dari elemen asalnya: warna teks, font, dan ukuran huruf mengikuti elemen yang menampungnya. Inilah alasan karakter panah pada li::before otomatis berwarna sama dengan teks listnya — satu deklarasi color di induk mengatur keduanya. Bila butuh tampilan berbeda, timpa saja langsung di aturan pseudo-elementnya seperti pada contoh badge di bawah.

Penggunaan Klasik #

Tanda kutip dekoratif pada blockquote — glyph besar diposisikan di belakang teks:

.kutipan-artikel {
  position: relative;
}

.kutipan-artikel::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  left: -6px;
  font-size: 64px;
  color: #cfe6dc;
}

Bullet berupa ikon — karakter panah menggantikan penanda list biasa:

.langkah-resep li::before {
  content: "→";
  margin-right: 8px;
  color: #1f6f54;
}

Badge counter dari attribute — fungsi attr() membaca isi attribute elemen dan memasukkannya sebagai teks:

.ikon-keranjang::after {
  content: attr(data-jumlah);
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: #e05252;
  color: #fdfaf3;
  font-size: 12px;
  text-align: center;
}

Bila keranjang diperbarui lewat JavaScript, cukup ganti attribute data-jumlah — posisi dan gaya badge tetap diurus CSS.

Bentuk dekoratif — dengan content: "" plus position: absolute, pseudo-element menjadi lingkaran, pita, atau aksen sudut tanpa satu pun gambar.

Demo berikut merangkum tiga pola klasik di atas — tanda kutip, badge counter, dan panah:

::before, ::after, dan ::marker #

Keduanya punya saudara yang sudah kita singgung pada chapter Styling Lists: ::marker, yang khusus menata kotak penanda pada item list. Perbedaannya terletak pada kebebasan: ::marker hanya menerima sedikit property, sedangkan ::before dan ::after adalah kotak biasa yang bisa diberi ukuran, latar, border, transform, dan positioning.

Perhatikan Bagaimana Isi Terbaca #

Konten hasil pseudo-element bukan sekadar visual: isi property content ikut masuk ke accessibility tree dan dibacakan oleh screen reader. Tanda kutip dekoratif biasanya terdengar wajar, tetapi simbol dengan makna khusus dapat terbaca dengan cara yang tidak terduga. Praktiknya: gunakan content untuk dekorasi atau pengulangan informasi yang sudah ada di halaman; bila teksnya membawa makna penting, tulis langsung di HTML. Tanda kutip dekoratif juga bisa disamarakan agar tidak dibacakan dengan sintaks alternatif content: "“" / "", yang dukungannya masih berkembang.

Kesalahan Umum #

Ringkasan #

::before dan ::after membuat kotak baru dari CSS — dengan syarat content diisi, biasanya string kosong untuk dekorasi — dan membuka pola tanda kutip, ikon bullet, badge attr(), serta bentuk dekoratif apa pun. Ingat bahwa isinya ikut dibacakan screen reader, dan ::marker tetap pilihan tepat khusus untuk penanda list. Chapter berikutnya menutup perhatian kita pada teks di dalam form: ::placeholder, pseudo-element yang menata petunjuk pada input.