Pseudo-Element di CSS: Cara Membuat dan Contohnya

Apa itu Pseudo-Element?

Pseudo-element CSS digunakan untuk mengakses bagian elemen tertentu pada HTML.

Pseudo-Elemen bisa digunakan untuk :

• Style pada huruf pertama, atau baris, dari sebuah elemen
• Sisipkan konten sebelum, atau setelah, konten elemen

Sintaks

Sintaks pseudo-elemen:

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

Pseudo-element ::first-line

Pseudo-element ::first-line digunakan untuk menambahkan style khusus ke baris pertama teks.

Contoh :

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Catatan: Pseudo-element ::first-line hanya dapat diterapkan ke elemen block-level.

Properti berikut berlaku untuk pseudo-elemen ::first-line :

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

Perhatikan notasi titik dua ganda – ::first-line versus :first-line

Tanda titik dua(::) menggantikan notasi titik dua tunggal(:) untuk pseudo-elemen di CSS3. Ini adalah upaya untuk membedakan antara pseudo-class dan pseudo-element.

Sintaks titik dua digunakan untuk pseudo-class dan pseudo-element di CSS2 dan CSS1.

Untuk kompatibilitas browser yang menggunakan CSS lama, sintaks titik dua tunggal dapat diterima untuk pseudo-elemen CSS2 dan CSS1.

Pseudo-elemen ::first-letter

Pseudo-elemen ::first-letter digunakan untuk menambahkan style khusus ke huruf pertama teks.

Contoh :

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Catatan: pseudo-elemen :: first-letter hanya bisa diterapkan ke elemen block-level.

Properti berikut berlaku untuk pseudo- element ::first-letter :

• font properties
• color properties 
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if “float” is “none”)
• text-transform
• line-height
• float
• clear

Pseudo-elemen dan Kelas CSS

Pseudo-elemen bisa dikombinasikan dengan kelas CSS:

Contoh :

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Contoh di atas akan menampilkan huruf pertama paragraf dengan class = “intro”, berwarna merah dan ukuran font huruf pertama yang lebih besar.

Multiple Pseudo-elements

Beberapa pseudo elemen juga bisa dikombinaskan dengan pseudo elemen lain, seperti contoh di bawah ini .

Dalam contoh berikut, huruf pertama paragraf akan berwarna merah, dengan ukuran font xx-large. Sisa baris pertama akan berwarna biru, dan dalam huruf kecil. Paragraf lainnya akan menjadi ukuran dan warna font default:

Contoh :

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

CSS – Pseudo elemen ::before

pseudo-elemen ::before dapat digunakan untuk menyisipkan beberapa konten sebelum konten sebuah elemen.

Contoh berikut menyisipkan gambar sebelum konten setiap elemen :

h1::before {
  content: url(smiley.gif);
}

CSS -Pseudo elemen :: after

Pseudo-elemen ::after bisa digunakan untuk memasukkan beberapa konten setelah konten sebuah elemen.

Contoh berikut menyisipkan gambar setelah konten dari setiap elemen :

h1::after {
  content: url(smiley.gif);
}

CSS -Pseudo elemen ::selection

Pseudo-elemen ::selectionn digunakan agar bisa memanipulasi atau menambahkan style pada css dalam tag HTML sesuai dengan yang user inginkan.

Properti CSS berikut yang dapat diterapkan ke pseudo elemen ::selection yaitu: color, background, cursor, dan outline.

Contoh berikut membuat teks yang dipilih menjadi merah dengan latar belakang kuning:

::selection {
  color: red;
  background: yellow;
}