CSS Pseudo-elements: Apa itu dan bagaimana cara menggunakannya?

CSS pseudo-elements adalah kata kunci yang dapat ditambahkan ke selector untuk memberi gaya pada bagian tertentu dari sebuah elemen. Misalnya, Anda dapat menggunakan ::first-line untuk mengubah font baris pertama dari sebuah paragraf, atau ::before untuk menyisipkan konten sebelum konten dari sebuah elemen.

Dalam artikel ini, kami akan menjelaskan apa itu pseudo-elements, bagaimana cara membedakannya dari pseudo-classes, dan bagaimana cara menggunakannya dalam kode CSS Anda.

Sintaksis pseudo-elements

Sintaksis pseudo-elements adalah sebagai berikut:

Anda hanya dapat menggunakan satu pseudo-element dalam sebuah selector. Pseudo-element harus muncul setelah selector sederhana dalam pernyataan tersebut.

Perhatikan notasi dua titik dua (::) yang digunakan untuk pseudo-elements. Notasi ini menggantikan notasi satu titik dua (:) untuk pseudo-elements di CSS3. Ini adalah upaya dari W3C untuk membedakan antara pseudo-classes dan pseudo-elements. Notasi satu titik dua digunakan untuk kedua jenis selector di CSS2 dan CSS1. Untuk kompatibilitas ke belakang, notasi satu titik dua masih dapat digunakan untuk pseudo-elements CSS2 dan CSS1.

Jenis-jenis pseudo-elements

Pseudo-elements yang didefinisikan oleh sejumlah spesifikasi CSS meliputi:

• ::after: Menyisipkan konten setelah konten dari sebuah elemen.
• ::before: Menyisipkan konten sebelum konten dari sebuah elemen.
• ::first-letter: Memberi gaya pada huruf pertama dari sebuah teks.
• ::first-line: Memberi gaya pada baris pertama dari sebuah teks.
• ::selection: Memberi gaya pada bagian teks yang dipilih oleh pengguna.

Ada juga beberapa pseudo-elements yang eksperimental atau belum didukung oleh semua browser, seperti:

• ::backdrop: Memberi gaya pada latar belakang di belakang elemen dialog atau fullscreen.
• ::cue: Memberi gaya pada teks cue yang ditampilkan oleh elemen <track>.
• ::cue-region: Memberi gaya pada daerah cue yang ditampilkan oleh elemen <track>.
• ::file-selector-button: Memberi gaya pada tombol pemilih file yang ditampilkan oleh elemen <input type="file">.
• ::grammar-error: Memberi gaya pada teks yang memiliki kesalahan tata bahasa.
• ::marker: Memberi gaya pada penanda daftar yang ditampilkan oleh elemen <li>.
• ::part(): Memberi gaya pada bagian tertentu dari elemen bayangan (shadow element).
• ::placeholder: Memberi gaya pada teks placeholder yang ditampilkan oleh elemen <input> atau <textarea>.
• ::slotted(): Memberi gaya pada elemen yang disematkan (slotted) ke dalam slot bayangan (shadow slot).
• ::spelling-error: Memberi gaya pada teks yang memiliki kesalahan ejaan.
• ::target-text: Memberi gaya pada teks target yang cocok dengan fragmen URL.

Contoh penggunaan pseudo-elements

Berikut adalah beberapa contoh penggunaan pseudo-elements dalam kode CSS:

Mengubah warna huruf pertama paragraf

Menambahkan tanda kutip sebelum dan sesudah kutipan

Membuat efek gradient pada baris pertama paragraf

Membuat efek hover pada elemen gambar

Keuntungan menggunakan pseudo-elements

Menggunakan pseudo-elements dapat memberikan beberapa keuntungan, seperti:

• Menghemat markup HTML dengan tidak perlu menambahkan elemen tambahan untuk memberi gaya pada bagian tertentu dari elemen.
• Meningkatkan konsistensi dan kemudahan pemeliharaan dengan tidak perlu mengulangi gaya yang sama untuk setiap elemen.
• Meningkatkan aksesibilitas dengan tidak perlu menambahkan konten dekoratif ke dalam markup HTML yang dapat mengganggu pembaca layar.

Kesimpulan

CSS pseudo-elements adalah kata kunci yang dapat ditambahkan ke selector untuk memberi gaya pada bagian tertentu dari sebuah elemen. Pseudo-elements berbeda dari pseudo-classes yang memberi gaya pada elemen berdasarkan keadaannya. Pseudo-elements memiliki sintaksis selector::pseudo-element { property: value; } dan dapat digunakan untuk berbagai tujuan, seperti mengubah font, menyisipkan konten, atau membuat efek visual. Pseudo-elements dapat memberikan keuntungan dalam hal efisiensi, konsistensi, dan aksesibilitas.