Pada penulisan sebelumnya, sahabat sudah mengenal pseudo elemen first-line dan first-letter. Kali ini saya akan mengenalkan before dan after. Seperti yang sudah sahabat ketahui bahwa fungsi pseudo adalah untuk menambahkan style tanpa harus menambahkan class, maupun ID.

Berikut cara penggunaan pseudo before dan after

Pseudo Elemen Before dan After

Coba perhatikan gambar di atas, saya menambahkan pseudo ::before dan ::after yang berisi gambar sebelum (before) dan setelah (after) elemen h1. Ketika kita jalankan pada browser, maka tampilannya akan seperti ini.

Pseudo Elemen Before dan After