Memahami CSS Pseudo-Elements (::before dan ::after) untuk Desain Bersih

atau kosong di dalam HTML hanya untuk diwarnai.

Untuk kasus dekorasi tersebut, CSS menyediakan alat sakti bernama Pseudo-elements (Elemen Semu).

Cara Kerja ::before dan ::after

Sesuai namanya, pseudo-elements bertugas menyuntikkan (membuat) "Anak Elemen Virtual" persis di dalam sebuah elemen HTML nyata, tepat sebelum kontennya (::before) atau tepat setelah kontennya (::after).

Aturan Mutlak: Pseudo-elements TIDAK AKAN MUNCUL DI LAYAR jika kamu tidak memberikan properti content di CSS, meskipun isinya hanya tanda kutip kosong!

/* 1. Elemen Utama (Induk) */
.judul-keren {
  position: relative;
  font-size: 24px;
}

/* 2. Menyuntikkan elemen dekorasi SETELAH teks judul */
.judul-keren::after {
  content: ""; /* WAJIB ADA! */
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50px;
  height: 4px;
  background-color: blue;
}

Kode di atas akan membuat garis bawah berwarna biru tebal di bawah .judul-keren tanpa harus mengotori kode HTML dengan elemen tambahan!

Trik Menambahkan Ikon Teks

Selain dekorasi balok/garis, kamu juga bisa menggunakan content untuk menyisipkan teks atau ikon (Emoji) secara otomatis ke setiap elemen tertentu.

/* Otomatis menambahkan panah di sebelah setiap link khusus */
.link-eksternal::after {
  content: " \2192"; /* Kode unicode untuk tanda panah (→) */
  color: red;
}

Kenapa Harus Pakai Ini?

1. HTML Tetap Bersih: Screen Reader (aplikasi tunanetra) biasanya mengabaikan elemen semu ini, sehingga mereka tidak terganggu oleh dekorasi visual.
2. Kode yang Modular: Kamu bisa mendesain efek Hover (seperti tombol yang memiliki garis bawah meluncur dari kiri ke kanan) sepenuhnya melalui CSS murni tanpa manipulasi DOM JavaScript yang membebani browser.