Tutorial Belajar CSS Bagian 16 : Cara Menggunakan Pseudo Element di CSS

0
459

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 15 : Cara Menggunakan Pseudo Class di CSS. Selanjutnya, kita akan mempelajari cara menggunakan pseudo element di CSS.

Pseudo Element pada CSS digunakan untuk menambahkan efek khusus ke beberapa selector.

Anda tidak perlu menggunakan JavaScript atau script lain untuk membuat efek pada dokume.

Sintaks sederhana pseudo-element adalah sebagai berikut :

selector: pseudo-element {property: value}

Class CSS juga dapat digunakan dengan pseudo-element :

selector.class: pseudo-element {property: value}

Pseudo-elemen yang paling umum digunakan adalah sebagai berikut :

No.Nilai & Deskripsi
1:first-line
Gunakan elemen ini untuk menambahkan gaya khusus ke baris pertama teks dari selector.
2:first-letter
Gunakan elemen ini untuk menambahkan gaya khusus ke huruf pertama teks dari selector.
3:before
Gunakan elemen ini untuk memasukkan beberapa konten sebelum elemen.
4:after
Gunakan elemen ini untuk memasukkan beberapa konten setelah elemen.

Pseudo-element :first-line

Contoh berikut menunjukkan cara menggunakan :first-line untuk menambahkan efek khusus ke baris pertama elemen dalam dokumen.

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>

   <body>
      <p class = "noline">
         Baris ini tidak memiliki garis bawah karea memiliki class noline.
      </p>
      
      <p>
         Baris pertama pada paragraph ini akan digaris bawahi sesuai dengan perintah CSS di atas.
         Sisa baris berikutnya akan kembali normal. 
         Contoh ini menunjukkan kepada kita kegunaan :first-line pada pseduo element akan memberikan efek 
         Pada baris pertama setiap element HTML.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Pseudo-element :first-letter

Contoh berikut menunjukkan cara menggunakan :first-letter untuk menambahkan efek khusus ke huruf pertama elemen dalam dokumen.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>

   <body>
      <p class = "normal">
         Huruf pertama dari paragraph akan memiliki besar huruf yang normal yaitu size 10 px;
      </p>
      
      <p>
         Huruf pertama dari paragraph ini akan memiliki besar 5em sesuai dengan
         aturan CSS di atas. Huruf yang lainnya akan memiliki besar yang normal. 
         Contoh ini menunjukkan kepada kita kegunaan :first-letter dalam pseduo element 
         Untuk memberikan efek pada karakter pertama pada setiap element HTML.
      </p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Pseudo-element :before

Contoh berikut menunjukkan cara menggunakan elemen :before untuk menambahkan beberapa konten sebelum elemen apa pun.

<html>
   <head>
      <style type = "text/css">
         p:before {
            content: url(https://img.icons8.com/emoji/48/000000/fire.png)
         }
      </style>
   </head>

   <body>
      <p> Baris ini akan diawali dengan sebuah bullet.</p>
      <p> Baris ini akan diawali dengan sebuah bullet.</p>
      <p> Baris ini akan diawali dengan sebuah bullet.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Pseudo-element :after

Contoh berikut menunjukkan cara menggunakan elemen :after untuk menambahkan beberapa konten setelah elemen apa pun.

<html>
   <head>
      <style type = "text/css">
         p:after {
            content: url(https://img.icons8.com/emoji/48/000000/fire.png)
         }
      </style>
   </head>

   <body>
      <p> Baris ini akan diakhiri sengan sebuah bullet.</p>
      <p> Baris ini akan diakhiri sengan sebuah bullet.</p>
      <p> Baris ini akan diakhiri sengan sebuah bullet.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan pseudo element di CSS untuk memberikan efek pada element di dokumen HTML.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.