PSEUDO-ELEMENT

Pseudo-element merupakan istilah yang digunakan dalam CSS yang memungkinkan kamu untuk memformat sebagian teks tertentu dari elemen. Dengan pseudo element, kamu bisa menambahkan gaya khusus ke bagian spesifik dari elemen, tanpa perlu menambahkan tag tambahan atau class dalam HTML.

Apa itu Pseudo-element?

Pseudo-element adalah kata kunci yang ditambahkan ke selector yang memungkinkan kamu untuk mempengaruhi bagian tertentu dari elemen yang dipilih. Kamu bisa menganggapnya sebagai cara untuk “memasuki” elemen dan menambahkan gaya ke sesuatu yang ada di dalamnya.

Beberapa contoh penggunaan umum pseudo-element adalah untuk mempengaruhi konten pertama atau terakhir dalam elemen, atau bahkan untuk menambahkan konten ke elemen itu sendiri.

Cara Menggunakan Pseudo-element

Untuk menggunakan pseudo-element, kamu butuh menambahkan sintaks spesifik ke selector CSS. Sintaks ini biasanya berisi dua titik dua ( ”::”) diikuti dengan kata kunci yang menentukan bagian mana dari elemen yang ingin kamu pengaruhi.

Berikut adalah contoh penggunaan pseudo-element:

p::first-line {
    color: blue;
    text-transform: uppercase;
}

Dalam contoh di atas, ::first-line adalah pseudo-element yang mengubah warna teks dan membuatnya menjadi huruf kapital pada baris pertama di semua paragraf (p).

Beberapa Jenis Pseudo-element

Terdapat beberapa jenis pseudo-element yang berbeda yang bisa kamu gunakan dalam CSS, antara lain:

::first-line

Pseudo-element ::first-line digunakan untuk mempengaruhi baris pertama dari elemen blok.

p::first-line {
    color: blue;
    text-transform: uppercase;
}

::first-letter

Pseudo-element ::first-letter digunakan untuk mempengaruhi huruf pertama dari elemen blok.

p::first-letter {
    font-size: 2em;
    color: red;
}

::before dan ::after

Pseudo-element ::before dan ::after digunakan untuk memasukkan konten sebelum atau setelah konten dalam elemen.

p::before {
    content: "Read this -";
}

p::after {
    content: "- Thank you!";
}

Ingatlah bahwa untuk ::before dan ::after, kamu harus menentukan nilai content, meskipun itu kosong.

Setiap pseudo-element memiliki karakteristiknya sendiri dan bisa sangat berguna untuk memperkaya desain web tanpa harus merubah struktur HTML. Jadi, cobalah dan eksperimenlah dengan pseudo-elemen untuk melihat apa yang bisa kamu ciptakan!