CSS Pseudo-elements

Pseudo-element digunakan untuk menambahkan efek khusus ke elemen tertentu, seperti menambahkan konten sebelum atau sesudah elemen tanpa menambahkannya secara langsung di HTML.

Contoh Pseudo-element Umum

1. ::before

Digunakan untuk menyisipkan konten sebelum elemen.

<style>
  p::before {
    content: "👉 ";
  }
</style>
 
<p>Ini teks paragraf.</p>

2. ::after

Digunakan untuk menyisipkan konten setelah elemen.

<style>
  h2::after {
    content: " ✅";
    color: green;
  }
</style>
 
<h2>Judul Selesai</h2>

3. ::first-letter

Menargetkan huruf pertama dalam elemen teks.

<style>
  p::first-letter {
    font-size: 200%;
    color: red;
  }
</style>
 
<p>Paragraf dengan huruf pertama besar.</p>

4. ::first-line

Menargetkan baris pertama dari elemen teks (biasanya dipengaruhi oleh lebar kontainer).

<style>
  p::first-line {
    font-weight: bold;
    color: blue;
  }
</style>
 
<p>Ini adalah paragraf panjang yang akan memiliki baris pertama yang berbeda tampilannya.</p>

Ringkasan Pseudo-element

Catatan: Gunakan dua titik (::) saat menggunakan pseudo-element modern.