CSS Pseudo-element

Psuedo element css digunakan untuk memilih bagian spesifik dari suatu element.

Kalau pseudo-class mengambil satu element (semua bagian) dengan parameter yang diberikan.

Contoh pseudo-element:

• Huruf pertama dalam paragraf
• Baris pertama di paragraf

Kalau pseudo-class, dia mengambil seluruh paragraf. Misal memilih paragraf kedua (ingat satu paragraf) tidak spesifik baris pertama atau huruf pertama.

Clear ya?

Syntax

Sintak yang digunakan untuk menulis pseudo-element adalah:

selektor::pseudo-element { 
 property:value;
}

Gunakan dua titik dua ::, kalau pseudo-class hanya satu :.

::first-line

Untuk memilih baris pertama dari suatu teks (tidak hanya paragraf <p>) maka digunakan ::first-line.

Saya kasih contoh memilih baris pertama dari suatu paragraf <p>.

p::first-line {
 color:red;
 background:yellow;
}

Property dapat diisi dengan properti teks css atau format huruf css.

• background
• clear
• color
• font
• letter-spacing
• line-height
• text-decoration
• text-transform
• vertical-align
• word-spacing

::first-letter

::first-letter digunakan untuk memilih karakter pertama atau huruf pertama.

Misal, saya mengambil huruf pertama di suatu paragraf:

p::fist-letter {
 property:value;
}

Properti dapat diisi dengan:

• background
• border
• clear
• color
• float
• font
• line-height
• margin
• padding
• text-decoration
• text-transform
• vertical-align (hanya jika “float” adalah “none”)

::before

::before digunakan untuk menambahkan style di sebelum suatu element.

Contoh:

p::before {
 content: url(cell-cursor.gif);
}

Maka, ketika saya menggunakan paragraf, hasilnya menjadi:

Ini contoh paragraf yang ada beforenya

Supaya lebih jelas, berikut inspect element kodenya:

::after

Kebalikan dari ::before, kalau ::after menambahkan konten style setelah element.

Contoh:

p::after {
 content:url(gambar.gif);
}

::selection

Memberikan style ketika teks diselect. Contoh:

::selection {
  color: white;
  background: #5340ff;
}

Hasilnya menjadi:

Diatas adalah gambar .gif, jadi kalau belum gerak tunggu dulu ya. Property yang bisa ditambahkan adalah:

• color
• background
• outline
• cursor

Selector Pseudo Element

Berikut ini adalah daftar selektor yang termasuk pseudo-element:

Selektor	Contoh	Keterangan
::selection	li::selection	Mengubah tampilan select (seperti proses memblok element/teks ketika mau copy)
::first-line	li::first-line	Memilih baris pertama di element <li>
::first-letter	li::first-letter	Memilih huruf pertama di setiap element <li>
::before	li::before	Menyisipkan konten sebelum <li>
::after	li::after	Menyisipkan konten setelah <li>