Pada kesempatan kali ini saya akan membahas tentang penggunaan pseudo element di CSS3. Ada 2 pseudo element CSS3 yang akan kita bahas. Dimana saya akan membahas ::first-line dan ::first-letter.

Penggunaan dari ::first-line ini untuk memberi style pada baris pertama pada selector yang akan diberi style. Contoh : di dalam suatu paragraf yang terdiri dari beberapa baris, baris pertama dari paragraf tersebut bisa kita berikan style menggunakan ::first-line. Sebagai catatan ::first-line hanya bisa diterapkan pada element bertipe block.

Langkah pertama buat HTML nya

Penggunaan Pseudo Element DiCSS3

Beri CSS nya sebagai berikut

Penggunaan Pseudo Element DiCSS3

Lihat Hasilnya

Penggunaan Pseudo Element DiCSS3

Bila temen temen lihat contoh di atas terdapat satu baris kalimat pada paragraf tersebut, dimana baris pertama berwarna kuning. Baris pertama ini lah yang diberikan style menggunakan pseudo element :first-line dengan color : yellow.

Sedangkan Penggunaan dari ::first-letter ini untuk memberi style pada huruf pertama pada selector yang terkait. Contoh

Langkah pertama buat HTML nya

Penggunaan Pseudo Element DiCSS3

Kita berikan Style nya sebagai berikut

CSS3-01-12-2014-eki-4

Disimpan file tersebut dan lihat hasilnya

Penggunaan Pseudo Element DiCSS3

Jika temen temen lihat pada contoh di atas terdapat huruf pertama dari kalimat pada paragraf tersebut dimana huruf pertama berwarna kuning dengan ukuran yang lebih besar. Huruf pertama ini lah yang diberikan style menggunakan pseudo element ::first-letter dengan font-size: 40px; dan color: kuning;

Semoga Bermanfaat.