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:

SelektorContohKeterangan
::selectionli::selectionMengubah tampilan select (seperti proses memblok element/teks ketika mau copy)
::first-lineli::first-lineMemilih baris pertama di element <li>
::first-letterli::first-letterMemilih huruf pertama di setiap element <li>
::beforeli::beforeMenyisipkan konten sebelum <li>
::afterli::afterMenyisipkan konten setelah <li>

Leave a Comment