Pseudo-elements

Pseudo-class menunjuk elemen yang benar-benar ada di dokumen; pseudo-element menunjuk bagian dari elemen — huruf pertama, baris pertama, teks petunjuk input — atau bahkan membuat bagian baru sebagai dekorasi. Sintaks modern memakai dua titik dua (::before, ::first-line) untuk membedakannya dari pseudo-class. Andalan utamanya adalah ::before dan ::after yang menyuntikkan konten dari CSS, membuka banyak pola dekorasi tanpa menambah elemen HTML. Chapter ini membahas pseudo-element yang paling sering dipakai beserta aturan mainnya.

::before dan ::after #

Pseudo-element ::before dan ::after membuat kotak pada awal dan akhir elemen yang ditunjuk, berisi teks dari properti content. Properti content wajib diisi — tanpa itu pseudo-element tidak dirender sama sekali. Nilai kosong "" sah dan lazim dipakai untuk kotak dekoratif. Contoh berikut menyuntikkan penanda status dan penanda tautan eksternal:

.status::before {
  content: "● ";
  color: rgb(22, 163, 74);
}

.status {
  color: rgb(22, 163, 74);
  font-weight: 700;
}

.tautan-luar::after {
  content: " ↗";
}

.tautan-luar {
  color: rgb(2, 132, 199);
}

Mari kita telaah aturan di atas baris demi baris:

1. Baris 1 (.status::before {): menyiapkan pseudo-element pada awal setiap elemen ber-class status.
2. Baris 2 (content: "● "): teks bullet dihasilkan browser dari CSS — teks ini tidak tertulis di HTML, sehingga tidak ikut tersalin saat pengguna menyalin isi halaman.
3. Baris 6–8 (.status { ... }): gaya dasar teks status berupa warna dan ketebalan.
4. Baris 11–12 (.tautan-luar::after): pseudo-element akhir menambahkan tanda ↗ setelah teks tautan sebagai isyarat tautan keluar.

Pola generated content seperti ini ideal untuk dekorasi: label, pemisah, dan ikon kecil. Karena kontennya tidak selalu dibacakan pada pembaca layar, simpan informasi yang penting di HTML dan pakai ::before/::after untuk pelengkap saja.

::first-letter dan ::first-line #

::first-letter menunjuk huruf pertama blok teks, sedangkan ::first-line menunjuk baris pertamanya. Kombinasi klasiknya adalah drop cap pada pembuka artikel:

.lead::first-letter {
  font-size: 32px;
  float: left;
  line-height: 1;
  padding-right: 6px;
  color: rgb(79, 70, 229);
}

.lead {
  font-size: 16px;
  line-height: 1.5;
}

Huruf pertama diperbesar hingga 32px lalu dibuat melayang (float: left) agar teks berikutnya mengalir mengelilinginya. Paragraf induknya tetap 16px dengan line-height 24px.

::placeholder, ::selection, dan ::marker #

.kolom-nama {
  border: 2px solid rgb(148, 163, 184);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
}

input::placeholder {
  color: rgb(148, 163, 184);
  font-style: italic;
}

.daftar li::marker {
  color: rgb(220, 38, 38);
}

Rincian tiap pseudo-element tersedia di MDN: ::before , ::after , ::first-letter , ::placeholder , ::selection , dan ::marker .

Hasil di Browser:

Sebelum teks status muncul bullet hijau dari ::before; teks status
berwarna hijau dan tebal (color: rgb(22, 163, 74), font-weight: 700).
Setelah teks tautan luar muncul tanda ↗ dari ::after; tautannya biru
(color: rgb(2, 132, 199)).
Huruf pertama paragraf lead tampil 32px berwarna ungu sebagai drop cap;
paragrafnya sendiri tetap 16px dengan line-height 24px.
Placeholder input tampil abu-abu miring; kotak inputnya bergaris
abu-abu (border-color: rgb(148, 163, 184), border-radius: 6px).
Penanda bullet daftar berwarna merah (::marker) sementara teks item
tetap gelap (color: rgb(15, 23, 42)).

Demo pada chapter ini membawa lima elemen uji dengan atribut data-expected pada elemen host-nya, plus satu paragraf untuk mencoba ::selection langsung dengan kursor.