Macam-Macam Pseudo Elements Yang Terdapat Di CSS3

05/07/2014    Faizal Rafik    830     Website

Hallo teman-teman ketemu lagi dengan saya di blog DUMET School. Pada tutorial kali ini kita akan membahas macam-macam Pseudo Elements yang terdapat di CSS3. Di tutorial sebelumnya saya juga sudah pernah membahas tentang macam-macam Pseudo Classes dalam CSS3 ,dimana cara penggunaan kedua Pseudo ini tidak jauh berbeda, kita tidak perlu menggunakan bantuan Javascript atau Plugin jQuery untuk membuat efek tersebut cukup dengan dua Pseudo ini kita dapat menciptakan efek tersebut. Sebelum masuk ke pokok pembahasannya kalian perlu tau rumus penulisan sintak CSS Pseudo Elements ini, contoh penulisannya seperti gambar dibawah ini :

Nah setelah kalian tau rumus penulisan Pseudo Element, sekarang kita akan masuk ke Pseudo Element yang pertama :

:frist-line

Pseudo Element :frist-line didalam CSS berfungsi untuk menambahkan efek khusus pada sebuah paragraf dibaris pertama. Contohnya seperti gambar dibawah ini :

:frist-latters

Pseudo Element :frist-letter didalam CSS berfungsi untuk menembahkan efek khusus pada huruf pertama didalam sebuah paragraf. Contohnya seperti gambar dibawah ini :

:before

Pseudo Element :before didalam CSS berfungsi untuk menambahkan isi konten sebelum elemen atau tag yang akan kita tambahkan isi konten. Contohnya seperti gambar dibawah ini :

:after

Pseudo Element :after didalam CSS berfungsi untuk menambahkan isi konten sesudah elemen atau tag, jadi Pseudo after ini kebalikan dari Pseudo elemen :before. Contohnya seperti gambar dibawah ini :

Nah itulah beberapa fungsi Pseudo Element yang terdapat di CSS. Sekian dulu artikel dari saya semoga artikel ini bermanfaat untuk kalian semua. Selamat mencoba ya teman-teman. Terima Kasih.

DEMO

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More