Pseudo-element CSS


Apa itu Pseudo-Elements?

Pseudo-element CSS digunakan untuk menata bagian tertentu dari suatu elemen.

Contohnya, dapat digunakan untuk:

  • Style huruf pertama, atau baris, dari suatu elemen
  • Menyisipkan konten sebelum atau setelah konten elemen

Sintaks

Sintaks elemen pseudo:

selector::pseudo-element {

  property: value;

}

::first-line Pseudo-element

::first-line pseudo-element digunakan untuk menambah style khusus untuk baris pertama dari teks.

Contoh berikut memformat baris pertama teks di semua elemen <p>:

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

Catatan: ::first-line pseudo-element hanya dapat diterapkan untuk elemen blok-level.


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

  • 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

Titik dua ganda menggantikan notasi titik dua tunggal untuk pseudo-elements di CSS3. Ini adalah upaya dari W3C untuk membedakan antara pseudo-class dan pseudo-element.

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

Untuk kompatibilitas yang lama, sintaks titik dua tunggal dapat diterima untuk pseudo-element CSS2 dan CSS1.


::first-letter Pseudo-element

::first-letter pseudo-element digunakan untuk menambah style khusus untuk huruf pertama dari teks.

Contoh berikut memformat huruf pertama teks di semua elemen <p>:

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

Catatan: ::first-letter pseudo-element hanya dapat diterapkan untuk elemen blok-level.


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

  • 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-elements dan Class CSS

Pseudo-elements dapat digabungkan dengan Class 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 dalam ukuran yang lebih besar.


Multiple Pseudo-elements

Beberapa elemen semu juga dapat digabungkan.

Dalam contoh berikut, huruf pertama paragraf akan berwarna merah, dalam ukuran font xx-large. Sisa dari baris pertama akan berwarna biru, dan dalam huruf kecil. Sisa paragraf 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 - ::before Pseudo-element

::before pseudo-elemeny dapat digunakan untuk memasukkan beberapa konten sebelum konten dari elemen.

Contoh berikut menyisipkan gambar sebelum konten setiap elemen <h1>: 

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

CSS - ::after Pseudo-element

::after pseudo-element dapat digunakan untuk memasukkan beberapa konten setelah isi elemen.

Contoh berikut menyisipkan gambar setelah konten setiap elemen <h1>: 

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

CSS - ::marker Pseudo-element

::marker pseudo-element memilih penanda daftar item.

Contoh berikut memberi style pada penanda item daftar:

::marker {
  color: red;
  font-size: 23px;
}

CSS - ::selection Pseudo-element

::selection pseudo-elemen sesuai dengan porsi elemen yang dipilih oleh pengguna.

Properti CSS berikut dapat diterapkan ke ::selection: color, background, cursor, dan outline.

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

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

Sumber referensi: w3schools

Komentar

Posting Komentar