Pseudo-element: ::before dan ::after

Elemen virtual dari CSS

Pseudo-element diawali dua titik dua (::) dan menciptakan "elemen virtual" yang tidak ada di HTML tapi bisa di-style. Dua yang terpenting: ::before (disisipkan sebagai anak pertama) dan ::after (anak terakhir).

Syarat wajib: content

.judul::before {
  content: ""; /* wajib ada, walau kosong */
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #8b5cf6;
  border-radius: 50%;
  margin-right: 8px;
}

Tanpa properti content, pseudo-element tidak akan muncul sama sekali. Isinya bisa string teks, "" kosong (buat bentuk dekoratif), atau gambar via url().

Kasus 1: ikon dan penanda

/* tanda kutip dekoratif di blockquote */
blockquote::before {
  content: "\201C"; /* karakter kutip buka */
  font-size: 3rem;
  color: #cbd5e1;
}

/* panah di link eksternal */
a[target="_blank"]::after {
  content: " ↗";
  font-size: 0.8em;
}

Kasus 2: badge "BARU"

.produk {
  position: relative;
}

.produk.baru::after {
  content: "BARU";
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ef4444;
  color: white;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
}

Badge muncul tanpa menambah elemen di HTML. Bersih dan mudah dirawat.

Kasus 3: overlay gradasi

.kartu-foto {
  position: relative;
}

.kartu-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%);
  border-radius: inherit;
}

Gradasi gelap di bagian bawah foto bikin teks putih di atasnya terbaca, tanpa elemen tambahan.

::selection dan ::placeholder

Dua pseudo-element bonus yang berguna:

/* warna blok teks yang diseleksi pengguna */
::selection {
  background: #8b5cf6;
  color: white;
}

/* style teks placeholder di input */
input::placeholder {
  color: #94a3b8;
  font-style: italic;
}

Catatan teknis: konten yang disisipkan via content tidak terbaca screen reader dengan konsisten dan tidak bisa diseleksi/dicopy pengguna. Aturannya: pseudo-element hanya buat dekorasi, jangan taruh informasi penting (harga, status, peringatan) di sana. Info penting harus ada di HTML asli.

Rangkuman

::before/::after butuh content buat muncul. Pakai buat ikon dekoratif, badge, overlay, dan kutip. Jangan taruh informasi penting di dalamnya karena tidak aksesibel. Bedakan dengan pseudo-class: pseudo-element (dua titik dua) membuat "elemen", pseudo-class (satu titik dua) memilih "keadaan".