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.
