Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Pada tutorial kali ini saya ingin membahas tentang pemakaian pseudo element CSS3. Ada 4 pseudo element CSS3 yang akan kita bahas. Namun tutorial ini kita bagi menjadi 2 artikel yang terpisah. Pada artikel (bag.1) kita akan membahas ::first-line dan ::first-letter, lalu pada artikel (bag.2) kita akan membahas ::before dan ::after.

 

 

4 pseudo element tersebut :

  • ::first-line
  • ::first-letter
  • ::before
  • ::after

::first-line

Penggunaan dari :first-line ini untuk memberi style pada baris pertama pada selector tertentu. Contoh : di dalam suatu paragraf yang terdiri dari beberapa baris, baris pertama dari paragraf tersebut bisa kita berikan style menggunakan ::first-line. Sebagai informasi ::first-line hanya bisa diterapkan pada element block, namun sebaliknya untuk element inline.

Contoh

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

HTML

<div id="kode"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> </div>

CSS

#kode p::first-line{
width:350px;
background-color:yellow;
}

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

 ::first-letter

Penggunaan dari ::first-letter ini untuk memberi style pada huruf pertama pada selector tertentu. Contoh : di dalam suatu baris kita bisa memberikan style pada huruf pertamanya.

Contoh

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt

HTML

<h3>Contoh</h3>
<div id="fletter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</p></div>

CSS

#fletter p::first-letter{
font-size: 30px;
color: red;
}

Bila melihat pada contoh di atas terdapat huruf pertama dari kalimat pada paragraf tersebut dimana huruf pertama berwarna merah dengan ukuran yang lebih besar. Huruf pertama ini lah yang diberikan style menggunakan pseudo element ::first-letter dengan font-size: 30px; dan color: red;