Pseudo-Elements CSS: Membuat Elemen Tambahan dengan CSS
Apa Itu Pseudo-Element dalam CSS?
Pseudo-element adalah fitur dalam CSS yang memungkinkan kita menargetkan bagian tertentu dari elemen HTML atau bahkan membuat elemen virtual tanpa harus mengubah struktur HTML. Dengan pseudo-element, kita bisa menambahkan konten atau efek visual seperti huruf pertama besar (drop cap), tooltip kustom, atau gaya khusus pada bagian-bagian tertentu dari teks.
Berbeda dengan pseudo-class yang digunakan untuk menargetkan state atau posisi elemen, pseudo-element digunakan untuk menargetkan bagian dari elemen itu sendiri.
1. Sintaks Dasar
Sintaks dasar pseudo-element menggunakan dua titik (::) setelah selector:
selector::pseudo-element {
property: value;
}
Contoh:
p::first-line {
font-weight: bold;
}
💡 Beberapa pseudo-element juga bisa ditulis dengan satu titik (:) untuk kompatibilitas lama, tetapi penulisan resmi menggunakan dua titik (::).
2. Daftar Pseudo-Element Umum
Berikut beberapa pseudo-element penting dalam pengembangan web modern:
| Pseudo-Element | Deskripsi |
|---|---|
| ::before | Menyisipkan konten sebelum konten elemen |
| ::after | Menyisipkan konten sesudah konten elemen |
| ::first-letter | Menargetkan huruf pertama dalam blok teks |
| ::first-line | Menargetkan baris pertama dalam blok teks |
| ::selection | Menargetkan teks yang dipilih oleh pengguna |
| ::marker | Menargetkan marker item daftar (seperti bullet) |
| ::placeholder | Menargetkan placeholder dalam form input |
3. Menggunakan ::before dan ::after
Dua pseudo-element paling populer adalah ::before dan ::after. Keduanya digunakan untuk menyisipkan konten virtual ke dalam elemen menggunakan properti content.
a. Menyisipkan Konten
Contoh:
.teks::before {
content: "Catatan: ";
color: red;
font-style: italic;
}
HTML:
<p class="teks">Ini adalah paragraf penting.</p>
Hasil:
Catatan: Ini adalah paragraf penting.
⚠️ Jika content kosong atau tidak didefinisikan, pseudo-element tidak akan muncul.
b. Membuat Elemen Visual (seperti ikon, garis pembatas)
Contoh membuat garis di bawah judul:
.judul::after {
content: "";
display: block;
width: 100px;
height: 2px;
background-color: #007bff;
margin: 10px auto 0;
}
HTML:
<h2 class="judul">Judul Artikel</h2>
4. ::first-letter – Huruf Pertama yang Menarik
Digunakan untuk membuat efek drop cap atau huruf pertama yang lebih besar dan berbeda dari teks lainnya.
Contoh:
.paragraf::first-letter {
font-size: 2em;
font-weight: bold;
color: darkblue;
}
HTML:
<p class="paragraf">Lorem ipsum dolor sit amet...</p>
5. ::first-line – Gaya Baris Pertama
Digunakan untuk menyesuaikan tampilan baris pertama dalam blok teks.
Contoh:
.paragraf::first-line {
text-transform: uppercase;
}
6. ::selection – Warna Teks Saat Diseleksi
Properti ini mengontrol gaya saat pengguna memilih teks.
Contoh:
p::selection {
background-color: yellow;
color: black;
}
⚠️ Browser support cukup baik, tetapi tidak semua properti didukung sepenuhnya.
7. ::marker – Mengubah Style Bullet List
Anda bisa mengganti bentuk bullet list menggunakan ::marker.
Contoh:
li::marker {
color: red;
font-size: 1.2em;
content: "•";
}
8. ::placeholder – Styling Placeholder Input
Digunakan untuk mengatur gaya teks placeholder dalam form input.
Contoh:
input::placeholder {
color: #aaa;
font-style: italic;
}
HTML:
<input type="text" placeholder="Masukkan nama...">
9. Contoh Praktis
a. Tombol dengan Ikon Virtual
HTML
<a href="#" class="btn">Klik Saya</a>
CSS
.btn::before {
content: "🔗 ";
}
.btn:hover::before {
content: "➡️ ";
}
Saat tombol di-hover, ikon berubah dari link menjadi panah.
b. Efek Tooltip Sederhana
HTML
<span class="tooltip">Hover saya</span>
CSS
.tooltip::after {
content: "Bantuan tambahan";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: white;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.tooltip:hover::after {
opacity: 1;
}
Tips dan Trik Efektif
- Gunakan ::before dan ::after untuk menambahkan dekorasi atau simbol tanpa mengubah HTML.
- Selalu gunakan content: "" meskipun kosong agar pseudo-element bekerja.
- Gunakan ::first-letter dan ::first-line untuk meningkatkan estetika teks panjang.
- Gunakan ::selection untuk memberikan sentuhan personal pada teks yang diseleksi.
- Gunakan ::placeholder untuk membuat form lebih ramah pengguna.
Kesimpulan
Pseudo-element adalah alat yang sangat berguna dalam CSS untuk menambahkan konten virtual, mengubah gaya bagian tertentu dari elemen, serta menciptakan efek visual yang menarik. Dengan pseudo-element seperti ::before, ::after, ::first-letter, dan lainnya, Anda bisa membuat antarmuka web yang lebih dinamis dan kreatif — tanpa harus mengubah struktur HTML.
Selanjutnya, kita akan membahas Media Queries CSS, yaitu teknik membuat website responsif untuk berbagai ukuran layar.
💡 Tips Praktis
- Gunakan ::before dan ::after untuk efek visual seperti ikon, badge, atau garis pembatas.
- Gunakan ::first-letter untuk efek drop cap pada artikel.
- Gunakan ::placeholder untuk styling form yang lebih profesional.
- Uji tampilan pseudo-element di berbagai browser untuk memastikan kompatibilitas.
