Mengenal Pseudo-element Selector Pada CSS

Ibrahim Al Anshor | 5 days ago | css

Pseudo-element - Selector pada CSS memiliki banyak jenis. Mulai dari selector biasa, selector combinator, dsb.

Salah satu jenis selector pada CSS adalah pseudo-element selector. Yang akan kita pelajari pada postingan ini.

Langsung saja mari kita simak penjelasan mengenai pseudo-element selector.

Pengertian Pseudo-element Selector

Pseudo-element Selector adalah selector yang digunakan untuk menentukan atau memberikan style pada bagian terentu suatu elemen.

Contohnya pseudo-element dapat digunakan untuk:

Pseudo-element dibuat dengan tanda dua titik dua (::) yang diletakan di antara nama selector dan nama pseudo-element.

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

Ada bermacam-macam jenis pseudo-element, berikut beberapa di antaranya.

Digunakan untuk memberikan style pada karakter/huruf pertama suatu elemen.

<p>
  Setiap kali aku melihatmu, aku jatuh cinta lagi.
</p>

p::first-letter {
  font-size: 44px;
  color: red;
}

Hasilnya.

First Letter

Digunakan untuk memberikan style pada baris pertama suatu elemen.

<p>
  Memikirkanmu sudah menjadi kebiasaan <br>
  Memimpikanmu adalah kecanduan <br>
  Dan mencintaimu adalah konsekuensi yang tak terhindarkan
</p>

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

Hasilnya.

First Line

Digunakan untuk menambah konten pada awal konten elemen.

Misalnya untuk menambahkan teks sebelum konten pada setiap tag <h1>.

Property yang digunakan adalah content dengan nilai dapat berupa teks, url, dsb.

<h1>Satu</h1>
<h1>Dua</h1>
<h1>Tiga</h1>

h1::before {
  content: 'Judul ';
}

Hasilnya.

Before

Digunakan untuk menambah konten pada akhir konten elemen.

Misalnya untuk menambahkan teks setelah konten pada setiap tag <h1>.

<h1>Satu</h1>
<h1>Dua</h1>
<h1>Tiga</h1>

h1::after {
  content: ' Judul';
}

Hasilnya.

After

Masih ada lagi macam-macam jenis pseudo-element pada CSS, untuk lebih lengkapnya saya sudah menyiapkan tautan berikut: