Cara Menggunakan Pseudo-Class dan Pseudo-Element di CSS

Dalam dunia CSS (Cascading Style Sheets), ada dua konsep penting yang sering digunakan untuk menciptakan tampilan interaktif dan menarik: Pseudo-Class dan Pseudo-Element. Keduanya berfungsi untuk menargetkan elemen dengan kondisi tertentu atau bagian spesifik dari elemen tanpa perlu menambah elemen baru di HTML.

Dengan memahami pseudo class CSS dan pseudo element CSS, kamu bisa membuat efek hover, highlight teks, dekorasi konten, animasi halus, serta berbagai efek visual tanpa menambah markup HTML yang berlebihan.

Baca juga: Belajar CSS Variable (Custom Property) dan Cara Penggunaannya

Apa Itu Pseudo-Class di CSS?

Pseudo-Class CSS digunakan untuk menargetkan elemen berdasarkan state (keadaan) atau posisi tertentu.

Misalnya, saat elemen di-hover, difokuskan, atau menjadi elemen pertama di dalam kontainer.

Sintaks penulisannya:

selector:pseudo-class {
    properti: nilai;
}Code language: CSS (css)

Contoh sederhana:

button:hover {
    background-color: #007bff;
    color: white;
}Code language: CSS (css)

Kode di atas berarti: saat pengguna mengarahkan kursor ke tombol, warna latar belakang dan teksnya akan berubah.

Contoh dan Jenis-Jenis Pseudo-Class CSS yang Sering Digunakan

Berikut beberapa pseudo class CSS populer dan fungsinya:

Pseudo-Class	Deskripsi	Contoh
:hover	Saat elemen diarahkan kursor	a:hover { color: red; }
:focus	Saat elemen aktif atau difokuskan (biasanya input)	input:focus { border-color: blue; }
:active	Saat elemen sedang diklik	button:active { transform: scale(0.98); }
:first-child	Elemen pertama dari parent	li:first-child { color: green; }
:last-child	Elemen terakhir dari parent	li:last-child { color: red; }
:nth-child(n)	Menargetkan elemen ke-n	li:nth-child(2) { font-weight: bold; }
:checked	Elemen input yang terpilih	input:checked { background-color: yellow; }
:disabled	Elemen input yang dinonaktifkan	button:disabled { opacity: 0.6; }
:not(selector)	Elemen yang tidak sesuai selektor	div:not(.highlight) { color: gray; }

Contoh Implementasi Pseudo-Class di CSS

Efek Hover pada Tombol

button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    transition: 0.3s;
}

button:hover {
    background-color: #218838;
    cursor: pointer;
}Code language: CSS (css)

Efek Fokus pada Input Form

input {
    border: 1px solid #ccc;
    padding: 8px;
    outline: none;
}

input:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.4);
}Code language: CSS (css)

Menandai Elemen Pertama dan Terakhir

ul li:first-child {
    color: green;
}

ul li:last-child {
    color: red;
}Code language: CSS (css)

Apa Itu Pseudo-Element di CSS?

Pseudo-Element CSS digunakan untuk menargetkan bagian spesifik dari elemen — misalnya huruf pertama, baris pertama, atau menambahkan konten sebelum/ sesudah elemen.

Sintaks penulisannya menggunakan dua tanda titik dua (::):

selector::pseudo-element {
    properti: nilai;
}Code language: CSS (css)

Contoh dasar:

p::first-line {
    font-weight: bold;
}Code language: CSS (css)

Kode tersebut akan menebalkan baris pertama dari setiap paragraf.

Perbedaan antara Pseudo-Class dan Pseudo-Element

Aspek	Pseudo-Class	Pseudo-Element
Simbol	:	::
Menargetkan	State (keadaan) atau posisi elemen	Bagian dari elemen
Contoh	:hover, :focus, :nth-child()	::before, ::after, ::first-letter
Fungsi utama	Menambah interaksi dan kondisi dinamis	Menambah atau memodifikasi konten tertentu
Bisa menambah konten baru?	Tidak	Ya, menggunakan content

Contoh dan Jenis-Jenis Pseudo-Element CSS

Berikut beberapa pseudo element CSS yang paling sering digunakan:

Pseudo-Element	Deskripsi	Contoh
::before	Menyisipkan konten sebelum elemen	h1::before { content: "🔥 "; }
::after	Menyisipkan konten setelah elemen	h1::after { content: " 💡"; }
::first-letter	Menargetkan huruf pertama	p::first-letter { font-size: 2em; }
::first-line	Menargetkan baris pertama	p::first-line { font-weight: bold; }
::selection	Menentukan gaya teks yang diseleksi	::selection { background: yellow; }

Contoh Implementasi Pseudo-Element di CSS

1. Menambahkan Ikon Sebelum dan Sesudah Teks

h1::before {
    content: "🔥 ";
}

h1::after {
    content: " 🚀";
}Code language: CSS (css)

Hasilnya akan muncul icon 🔥 sebelum teks dan icon 🚀 sesudah teks.

2. Membuat Efek Garis Dekoratif di Judul

h2 {
    position: relative;
    display: inline-block;
}

h2::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #007bff;
}Code language: CSS (css)

Hasilnya akan muncul garis dekoratif di bawah judul.

3. Efek Teks Awal Seperti Drop Cap

p::first-letter {
    font-size: 3em;
    float: left;
    line-height: 1;
    padding-right: 8px;
    color: #ff5733;
}Code language: CSS (css)

Menggabungkan Pseudo-Class dan Pseudo-Element

Anda juga bisa menggabungkan keduanya untuk membuat efek yang lebih kompleks.

Contoh:

a:hover::after {
    content: " →";
    color: #007bff;
}Code language: CSS (css)

Artinya, ketika tautan di-hover, akan muncul panah di belakang teks.

Contoh Lengkap: Tombol Hover dengan Pseudo-Element

HTML:

<button class="btn">Klik Saya</button>Code language: HTML, XML (xml)

CSS:

.btn {
    position: relative;
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 25px;
    overflow: hidden;
    transition: 0.3s ease;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transition: left 0.3s ease;
}

.btn:hover::before {
    left: 0;
}Code language: CSS (css)

Efeknya: saat tombol di-hover, muncul efek highlight bergerak dari kiri ke kanan — elegan dan profesional ketika cursor diarahkan ke tombol!

Best Practice Pseudo-Class dan Pseudo-Element CSS

1. Gunakan ::before dan ::after hanya untuk elemen yang memiliki content visual.
2. Jangan gunakan pseudo-element untuk konten penting — hanya untuk dekorasi.
3. Kombinasikan dengan transition dan transform agar efek lebih halus.
4. Gunakan :not() untuk menargetkan elemen dengan kondisi tertentu secara efisien.
5. Jaga agar kode CSS tetap mudah dibaca dengan pemisahan logis antara class dan pseudo.

Kesimpulan

Dengan memahami pseudo-class CSS dan pseudo-element CSS, kamu bisa meningkatkan kreativitas dalam membuat tampilan web interaktif tanpa menambah elemen HTML baru. Gunakan pseudo-class untuk kondisi seperti hover, focus, atau posisi tertentu, dan gunakan pseudo-element untuk menambahkan konten visual tambahan seperti ikon, dekorasi, atau efek tipografi.

Jika dikuasai, kombinasi keduanya bisa menciptakan desain modern dan efisien — cocok untuk tombol, teks, card, atau hero section interaktif.