Mengenal Pseudo Elemet pada CSS.

Elemen Semu atau lebih dikenal dengan pseudo element ataupun unsur palsu yang terdapat pada rangkaian kode css yang mungkin sebagian orang sulit untuk memahaminya, begitupun saya. Artikel ini saya buat berdasarkan apa yang ingin saya ketahui, sebenarnya di internet sudah banyak bertebaran artikel-artikel yang membahas tentang Pseudo element ataupun unsur semu, namun pada blog ini saya masih tetap ingin share kerena bag saya tidak ada kata terlambat untuk belajar, mengetahui, dan berbagi ilmu. Sebenarnya saya tidak begitu mengetahui apa definisi khusus ataupun uraian dari pengertian Pseudo element pada CSS, hanya saja pada artikel ini saya akan memberi contoh seperti apa pseudo element tersebut dan saya harap semoga saja para pembaca dapat menarik kesimpulannya, baiklah berikut ini contoh dari Pseudo element.

Contoh

p:first-letter {
color:#ff3300;
font-size:xx-large;
}

Hasilnya:

Lihat pada awal kalimat yang mempunyai karakter lebih besar dari lainnya dan itu menggunakan :ferst-letter element pseudo.

Jika di gabungkan antara :first-line dan :first-letter.
dan penggunaan css nya seperti ini.

p:first-line{
color:#0000ff;
font-variant:small-caps;
}
p:first-letter {< color:#ff3300; font-size:xx-large; }

Hasilnya:

Yang terjadi bila kita melakukan kombinasi pada kedua pseudo elemen tersebut.
maka hasilnya akan seperti pada kalimat ini pada garis pertama

CSS-:Before Elements
Masukan content sebeleum elemen.
Contoh:

h1:before {
content:url(smiley.gif);}

hasilnya:

Babble of Ibnoec Heading

:before pseudo element tempatkan content sebelum elemen

CSS-:After Elements
Masukan Content setelah elemen.
Contoh

h1:after {content:url(smiley.gif);}

hasilnya:

Babble of Ibnoec Heading

:after pseudo element tempatkan content seteleh elemen

Di atas dasar-dasar penggunaan pseudo elemen. dan dengan pseudo elemen kita dapat membuat macam-macam style yang unik dan menarik. mungkin di antara kalian akan banyak yang lebih memahami tentang pseudo ini dan mudah untuk belajar, berikut tabel penjelasan atribut pseudo element yang terdapat pada template.
Tabel Penjelasan pseudo elements.

Seleksi	Contoh	Penjelasan Contoh
:link	a:link	Pengaturan link yang belum dikunjungi
:visited	a:visited	Pengaturan link yang sudah dikunjungi
:active	a:active	Memilih link aktif
:hover	a:hover	Memilih link pada saat mengarahkan mouse
:focus	input:focus	Memilih elemen input yang memiliki fokus
:first-letter	p:first-letter	Memilih huruf pertama dari setiap elemen <p>
:first-line	p:first-line	Memilih baris pertama dari setiap elemen <p>
:first-child	p:first-child	Memilih elemen <p> setiap yang merupakan elemen pertama dari elemen induk.
:before	p:before	Memasukkan konten sebelum setiap elemen <p>
:after	p:after	Memasukkan konten setelah setiap elemen <p>
:lang(language)	p:lang(it)	Memilih setiap elemen <p> dengan nilai atribut lang mulai dengan "it"

Catatan : agar semua pseudo element bisa bekerja dengan baik, maka browser yang anda gunakan harus selalu update dan mendukung atribut CSS, semoga artikel ini bisa bermanfaat dan berguna bagi Anda yang sedang memodifikasi template, terutama bagi anda pengguna layanan blogger, selamat berkreasi dan terimakasih banyak atas kunjungannya.

Sumber referensi : http://under-88.blogspot.com/2012/06/belajar-mengenal-pseudo-element.html#axzz2xqOSO7Kc

Share this: