Tutorial Belajar CSS Part 36 – Pseudo Element

Selamat datang lagi dalam tutorial warung belajar, masih membahas mengenai CSS, dalam tutorial ini kita akan membahas mengenai CSS Pseudo Element.

Pseudo Element adalah salah satu jenis selector css yang digunakan untuk mengakses bagian elemen tertentu pada HTML, Semisal seperti garis pertama pada paragraf, Lalu Karakter pertama dari sebuah paragraf, dan lain sebagainya.

Untuk syntax pseudo element kurang lebih seperti berikut ini :

Kita akan mempelajari beberapa jenis Pseudo Element yang bisa anda gunakan dalam CSS

---

 

Video Tutorial CSS – Part 36 – Mengenal Pseudo Element

Buat teman – teman yang biasanya belajar menggunakan Video, kita juga ada video tutorial Mengenal Pseudo Element, bisa diakses melalui video dibawah :

---

 

::first-line Pseudo Element

Pseudo Element jenis ini digunakan untuk mengganti tampilan baris pertama pada sebuah elemen, dalam contoh ini kita coba untuk merubah tampilan baris pertama pada sebuah paragraf, silahkan perhatikan skrip dibawah ini :

 

Semisal kita simpan dengan nama first-line.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Keterangan :

• Pada baris pertama di paragraf text berwarna merah, dan ukurannya adalah 30 pixel, hal tersebut karena kita menggunakan p::first-line

 

 

 

::first-letter

Pseudo Element jenis ini digunakan untuk merubah tampilkan huruf pertama pada sebuah element, dalam contoh ini kita akan gunakan pada elemen paragraf, silahkan perhatikan skrip dibawah ini :

 

Semisal kita simpan dengan nama first-letter.html, lalu saya buka di browser, maka hasilnya adalah sebagai berikut :

Keterangan :

• Huruf pertama pada paragraf tersebut ditampilkan dengan warna merah dan ukurannya 70 pixel, karena kita menggunakan ::first-letter

 

 

 

::before dan ::after

Pseudo Element Jenis ini digunakan untuk memberikan object pada bagian sebelum atau sesudah dari sebuah element, untuk contohnya perhatikan skrip dibawah ini :

 

semisal kita simpan dengan nama before-after.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

• Pada Paragraf pertama terdapat gambar dengan nama smile.gif karena kita memberikan selector p.satu::before
• Pada Paragraf kedua terdapat gambar dengan nama smile.gif karena kita memberikan selector p.dua::after

 

 

Jadi dengan Adanya Pseudo Element ini, teman – teman dapat memanipulasi bagian tertentu dari element pada HTML, jika ada yang ingin didiskusikan silahkan dikolom komentar, baik sekian dulu sampai jumpa di tutorial selanjutanya…