Pseudo-element ::before dan ::after

Sisipkan konten dekoratif tanpa menambah HTML.

Pahami konsepnya

Pseudo-element membuat "elemen hantu" yang tidak ada di HTML: ::before dan ::after masing-masing menyisipkan kotak anonim di awal dan akhir isi elemen. Keduanya nyaris tak berguna tanpa properti content — itulah nyawa mereka: content: "★" menulis bintang, content: "" menghasilkan kotak kosong yang bisa diberi lebar-tinggi untuk dekorasi murni.

Pemakaian sehari-hari: hiasan tipografis (content: "→" pada tautan "selengkapnya"), pembatas section (hr bergaya ulang lewat ::after), badge angka, hingga efek kutipan besar di blockquote. Karena ::before adalah anak pertama elemen, ia mewarisi gaya induknya dan bisa diposisikan absolute bila induknya relative.

Keluarga lain yang berguna: ::first-line dan ::first-letter mengatur baris pertama dan huruf awal paragraf (drop cap koran), ::placeholder menata teks isian form, ::selection mewarnai blok teks yang di-highlight pengunjung. Catatan gaya penulisan: dua tanda titik dua (::) membedakan pseudo-element dari pseudo-class satu titik dua — keduanya sering tertukar padahal berbeda keluarga.

Coba contoh kode

.tautan-selengkapnya::after {
  content: " →";
  color: #c7603e;
}

blockquote::before {
  content: "\201C";        /* tanda kutip besar */
  font-size: 3em;
  color: #bbb;
  float: left;
  margin-right: 6px;
}

input::placeholder { color: #9aa5ab; }
p::selection { background: #ffe9a8; }

Empat dekorasi tanpa satu pun HTML baru: panah otomatis menempel di tiap tautan "selengkapnya", kutipan besar menghiasi blockquote, placeholder form berabu lembut, dan blok yang di-highlight pengunjung menyala kuning. Konten dengan escape \201C adalah tanda kutip tipografis " — karakter Unicode bisa ditulis lewat kode heksadesimalnya.

Kotak dekoratif dari content kosong

.kartu { position: relative; }

.kartu::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed currentColor;
  border-radius: 8px;
  pointer-events: none;   /* hantu: tak menghalangi klik */
}

content: "" menghasilkan kotak kosong yang lalu dibentuk: absolute + inset menempelkannya 6px di dalam kartu sebagai bingkai putus-putus. pointer-events: none memastikan dekorasi ini tak menghalangi klik tombol di bawahnya — kebiasaan penting untuk semua hiasan ::before/::after.

Latihan singkat

Hiasi heading-mu dengan garis aksen ::after selebar 48px, lalu buat drop-cap koran dengan ::first-letter pada paragraf pembuka.