Panduan Rujukan Pseudo-Element CSS

Pseudo-element CSS

Pseudo-element CSS digunakan untuk menetapkan gaya bagi bagian khusus elemen

Contoh, ia dapat digunakan untuk:

  • Tetapkan gaya huruf pertama atau baris pertama elemen
  • Sisipkan kandungan sebelum atau setelah kandungan elemen
  • Tetapkan gaya tandai pilihan dalam senarai
  • Tetapkan gaya view latar belakang untuk dialog

Tabel di bawah menunjukkan pseudo-element yang berbeda dalam CSS:

Pseudo-element Contoh Penggambangan contoh
::after p::after Sisipkan kandungan setelah kandungan elemen yang ditentukan
::backdrop dialog::backdrop Tetapkan gaya view latar belakang untuk elemen dialog atau elemen pop-up
::before p::before Sisipkan kandungan sebelum kandungan elemen yang ditentukan
::file-selector-button ::file-selector-button Pilih tombol untuk <input type="file">
::first-letter p::first-letter Pilih huruf pertama untuk setiap elemen <p>
::first-line p::first-line Pilih baris pertama untuk setiap elemen <p>
::grammar-error ::grammar-error Tetapkan gaya teks yang ditandai sebagai kesalahan sintaks pemeriksa web
::highlight() ::highlight(custom-name) Tunjukkan penyorotan yang disesuaikan
::marker ::marker Tandai pilihan dalam senarai
::placeholder input::placeholder Tetapkan gaya teks teks placeholder untuk elemen <input> atau <textarea>
::selection ::selection Tetapkan gaya teks yang dipilih pengguna
::spelling-error ::spelling-error Tetapkan gaya teks yang ditandai sebagai kesalahan ejaan pemeriksa web
::view-transition ::view-transition Wadah dasar transit view yang mengandung semua transit view di halaman
::view-transition-group ::view-transition-group Menunjukkan kumpulan snapshot transit view tunggal
::view-transition-image-pair ::view-transition-image-pair Wadah 'kawasan lama' dan 'kawasan baru' yang menunjukkan keadaan view transit
::view-transition-new ::view-transition-new Merupakan keadaan 'kawasan baru' untuk pertukaran pemandangan.
::view-transition-old ::view-transition-old Merupakan keadaan 'kawasan lama' untuk pertukaran pemandangan.