Pseudo element bisa diartikan secara harfiah sebagai elemen palsu. Pseudo elemen adalah bagian teks di posisi tertentu, misalnya awal teks atau yang lainnya. Kalau belum paham maksud saya, abaikan saja dan fokus untuk memahami kegunaannya. Berikut ini adalah pseudo elemen yang bisa digunakan pada CSS.
- ::first-line => style hanya diterapkan pada baris pertama
- ::first-letter => style hanya diterapkan pada huruf pertama
- ::before => menyisipkan sesuatu sebelum tag tertentu.
- ::after => menyisipkan sesuatu sebelum tag tertentu.
- ::selection => style diterapkan pada teks yang dipilih.
Contoh :
- p::first-line
- p::first-leter
- h1::first-letter
- h2::first-letter
- p::after
- p::before
- ::selection
Tanpa basa-basi, seperti biasa, kita akan belajar dengan contoh.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
.styleku{
width : 300px;
height : auto;
}
::selection{
color : yellow;
background : red; }
.styleku1{
background : orange;
}
.styleku1 p::first-line{
background : brown;
color : blue;
}
.styleku2{
background : blue;
}
.styleku2 p::first-letter{
font-weight : bold;
color : red;
}
</style>
</HEAD>
<BODY>
<h2>Belajar HTML</h2>
<div class="styleku">
<div class="styleku1">
<p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
</p>
</div>
<div class="styleku2">
<p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf kedua.
</p>
<p>Ini paragraf ketiga</p>
</div>
</div>
</BODY>
</HTML>
Pada contoh di atasaya menggunakan ::first-letter, ::first-line dan ::selection. Selain itu, ada selector ".styleku1 p::first-line" dan ".styleku2 p::first-letter". Dengan pseudo element, kita tidak perlu menggunakan span untuk menandai bagian awal atau akhir yang ingin kita beri style CSS. Kita juga bisa mengubah nilai dari bagian yang diblok menggunakan "selection".
Btw, penggunaan nama tag bersama dengan nama class sebagai selector CSS menandakan bahwa style hanya diterapkan pada child yang diapit tag tersebut. Selector ".styleku1 p{...}" artinya tag <p> yang termasuk child class "styleku1" akan menerima style yang diapit dengan kurung kurawal ("{" dan "}").
Secara umum class yang memiliki pseudo elemen berupa ::first-letter, first-line dan background; hanya bisa memiliki properti tertentu saja. Properti umum yang bisa digunakan adalah background, text-decoration, color, font-size, dan font-family. Untuk first letter, kita bisa juga menggunakan properti float. Beberapa properti lain silakan dicaritahu dengan mencobanya sendiri. :)
Before & After
Berikutnya, kita akan mencoba menggunakan before dan after. Untuk before dan after; kita bisa menggunakan properti content. Properti content bisa kita isi dengan karakter tertentu berdasarkan unicode-nya. Before dan after biasa digunakan pada list. Kalian juga bisa menggunakannya pada elemen HTML lainnya.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
#daftar1 li::after{
content:" \1F4D4";
}
#daftar2 li{
list-style:none;
}
#daftar2 li::before{
content:"\1F4D3";
}
</style>
</HEAD>
<BODY>
<h2>Belajar HTML</h2>
<ul id="daftar1">
<li>Belajar HTML</li>
<li>Belajar HTML</li>
<li>Belajar HTML</li>
</ul>
<ul id="daftar2">
<li> Belajar HTML</li>
<li> Belajar HTML</li>
<li> Belajar HTML</li>
</ul>
</BODY>
</HTML>
Before dan after digunakan pada tag <li> dalam list. Item di dalam list yang akan diberi "pseudo element before" perlu diberi list-style dengan nilai none jika kalian bertujuan untuk mengganti bullet yang digunakan.