Pseudo-Element


Pseudo-elemen sangat mirip dengan pseudo-class, namun bedanya kata kunci mereka dimulai oleh 2 kali titik dua “::”, yang ditempatkan pada bagian akhir dari selector. Tujuannya pseudo-elemen adalah menata bagian-bagian tertentu dari sebuah elemen. Seperti menata tampilan huruf pertama atau baris pertama dari suatu elemen, menambahkan konten sebelum atau sesudah dari sebuah elemen.

Aturan Penulisan :

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

Berikut daftar dari pseudo-element :

::after

::before

::first-letter

::first-line

::selection

::backdrop

Masing – masing memiliki prilaku / fungsi yang menarik yang sangat unik.

Pada CSS versi 1 dan 2, pseudo-element menggunakan tanda titik dua “:”. Namun karna upaya dari W3C untuk membedakan antara pseudo-class dan pseudo-element, pada versi terbaru CSS yaitu versi 3 (CSS3) pseudo-element menggunakan 2 kali tanda titik dua “::”.

::first-line

Pseudo-element ini digunakan untuk menambahkan atau menata tampilan khusus ke baris pertama sebuah teks.

Contoh :

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

Hanya sebagian kecil dari properti CSS yang dapat digunakan untuk pseudo-element jenis ini. Properti berikut yang dapat digunakan untuk pseudo element jenis ::first-line :

::first-letter

Pseudo-element ini digunakan untuk menambahkan atau menata tampilan khusus ke huruf pertama sebuah teks.

Properti berikut yang dapat digunakan untuk pseudo element jenis ::first-letter :

Contoh :

p::first-letter {
  color: red;
  font-size: 130%;
}

::before

Pseudo-element jenis ini dapat digunakan untuk memasukkan konten sebelum konten sebuah element.

Contoh :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>

CSS :

p::before {
    content: "*";
}

::after

Pseudo-element jenis ini dapat digunakan untuk memasukkan konten setelah / sesudah konten sebuah element.

Contoh :

<label></label>
<input type="text" placeholder="nama">

CSS :

label::after {
    content: “:”;
}

Note : properti content harus ada pada pseudo-element ::after dan ::before

::selection

Pseudo-element jenis ini digunakan untuk menerapkan style ke bagian dokumen / teks pada halaman yang telah diblok atau ditandai.

Properti berikut yang dapat digunakan untuk pseudo element jenis ::selection :

Contoh :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis,
purus vel pharetra finibus, nibh sem ornare mi, in placerat diam quam ac sapien.
Vivamus erat sapien, accumsan quis egestas ac, placerat quis arcu. Ut porta sem
sit amet nisi eleifend, ut pharetra velit egestas. Sed a leo sit amet ligula dignissim
convallis.<p>

CSS :

p::selection {
    background-color: black;
    color: white;
}