1. Apa Itu ::before dan ::after?

• ::before: Menyisipkan konten sebelum is i (konten) dari elemen yang dipilih.

• ::after: Menyisipkan konten setelah isi (konten) dari elemen yang dipilih.

Syarat Wajib: Properti content

Pseudo-element tidak akan muncul jika Anda tidak menyertakan properti content. Meskipun Anda hanya ingin membuat kotak warna tanpa teks, Anda harus menuliskan content: "";.

2. Teknik Dasar Penggunaan

Secara default, pseudo-element bersifat inline. Jika Anda ingin memberinya lebar (width) atau tinggi (height), Anda harus mengubahnya menjadi display: block atau inline-block, atau menggunakan position: absolute.

Contoh Sederhana:

/* Menambahkan tanda kutip sebelum teks */
blockquote::before { content: "“"; font-size: 3rem; color: #ccc;
}

3. Tutorial: Membuat Garis Dekoratif di Bawah Judul

Mari kita buat judul artikel yang memiliki garis dekoratif otomatis di bawahnya agar terlihat lebih elegan.

Struktur HTML

<h2 class="styled-title">Berita Terpopulerh2>

Kode CSS

.styled-title { position: relative; /* Menjadi jangkar untuk ::after */ display: inline-block; padding-bottom: 10px;
} .styled-title::after { content: ""; /* Wajib ada */ position: absolute; bottom: 0; left: 0; width: 50%; /* Garis hanya setengah lebar judul */ height: 4px; /* Tebal garis */ ba ckground-color: #3498db; border-radius: 2px; transition: width 0.3s ease; /* Animasi saat di-hover */
} .styled-title:hover::after { width: 100%; /* Garis memanjang saat judul di-hover */
}

4. Contoh Kasus Lainnya

• Custom Bullet Points: Mengganti titik daftar (

• ) standar dengan ikon atau karakter kustom.

• Image Overlay: Menambahkan lapisan warna transparan di atas foto saat di-hover tanpa menambah elemen

• Clearfix: Teknik klasik untuk merapikan elemen yang menggunakan float.

Tips Pro untuk Developer

1. Gunakan Position Absolute: Hampir 90% penggunaan dekorasi menggunakan kombinasi position: relative pada elemen induk dan position: absolute pada ::before/::after. Ini memberi Anda kontrol penuh atas letak hiasan tersebut.

2. Jangan Masukkan Konten Penting: Karena konten di dalam ::before/::after berada di CSS, mesin pencari (SEO) dan beberapa screen reader mungkin tidak membacanya dengan baik. Gunakan hanya untuk hiasan, bukan informasi krusial.

3. Z-Index: Jika dekorasi menutupi teks, gunakan z-index: -1 pada pseudo-element agar ia pindah ke belakang teks.

Dengan teknik ini, Anda bisa mempercantik tampilan portal SatuMedia atau aplikasi Kolak Pisang Anda dengan elemen visual yang halus tanpa merusak kode HTML yang sudah bersih!