Belajar Mengenal "Pseudo Element" !!

Sudah di pastikan css sebagai bahan perlengkapan dalam pembuatan template HTML,dari segi fungsi akan sangat banyak pekerjaan dengan CSS.
untuk artikel kali ini kita akan mengenal dasar-dasar Pseudo Element (Elemen Semu). Pada CSS Tutorial pada web W3C yang sebagian orang mungkin akan sulit memahami apalagi yang kurang memahami bahasa inggris.Kesempatan ini saya akan memberikan beberapa dasar-dasar mudah cara kerja pseudo element dalam bahasa indonesia.

1. First-Line (Pseudo Element)
Menentukan garis pertama yang berbeda.
contoh

p:first-line{color:#ff3300;
font-variant:small-caps; 
}

hasilnya:

lihat perbedaan garis pertama dan garis kedua. garis pertama dengan:firs-line.
dan garis kedua tidak akan mengandung selector pseudo.

2.First-Letter (Pseudo Element)
menentukan carakter huruf pertama yang berbeda.
Contoh

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

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

3.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

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

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

hasilnya:

CSS TUTS HEADING

:before pseudo element tempatkan content sebelum elemen

5.CSS - :After Elements
Masukan Content setelah elemen.
Contoh

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

hasilnya:

CSS TUTS 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. nah 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.