CSS Pseudo elemen

Pengertian pseudo elemen.

Apa itu pseudo elemen ?

Pseudo dalam bahasa Indonesia berarti semu / tidak nyata.
Jadi Pseudo elemen adalah elemen semu.

Dalam CSS, pseudo elemen adalah :

1. Elemen yang dibuat dengan / melalui CSS BUKAN HTML.
2. Elemen pseudo tidak memiliki wujud tag HTML yang nyata/ tidak terdapat dalam HTML.
3. Elemen pseudo dapat ditampilkan di halaman web.
4. Elemen pseudo bisa meggunakan properti CSS sama seperti elemen HTML pada umumnya.
5. Selector CSS untuk elemen pseudo ditandai dengan : atau ::

Elemen semu ::before / ::after

1. ::before

<div class='induk'>
  <div class='konten satu'>Konten</div>
  <div class='konten dua'>Konten</div>
</div>
<style>
.satu::before { content:'No.1';}
.dua::before { content:'No.2';}
.satu::before,.dua::before { padding:0 10px;}
</style>

Konten

Konten

2. ::after

<a href='/'>Tautan</a>
<style>
a::after { content:'\f08e'; 
  font: var(--fa-font-solid);
  padding: 0 8px;
  }
</style>

Tautan

Elemen semu pada teks.

Huruf pertama pada suatu kalimat terdapat pseudo elemen yang bisa dikustom tanpa memerlukan Tag pemformat teks.

3. ::first-letter

<p>Di jaman dahulu hiduplah seorang...</p>
<style>
p::first-letter {
       font:900 35px serif;
       color: brown;
}
</style>

Di jaman dahulu hiduplah seorang...

4. ::first-line

<p>Seekor serigala datang ke elang tua itu, membungkuk dengan hormat, lalu ia mengeluh, “Rajaku yang Mulia, aku sangat kelaparan sampai-sampai aku ingin menangis! Berikan aku sedikit makanan.”</p>
<style>
p::first-letter {
       font:900 35px serif;
       color: orange;
}
p::first-line {
       text-shadow: 1px 1px 2px brown;
       }
</style>

Seekor serigala datang ke elang tua itu, membungkuk dengan hormat, lalu ia mengeluh, “Rajaku yang Mulia, aku sangat kelaparan sampai-sampai aku ingin menangis! Berikan aku sedikit makanan.”

Elemen pseudo bawaan tag HTML

5. ::marker

Pseudo elemen yang terdapat pada elemen list-item (tag <li>) disebut marker atau penanda urutan dan penyebutan selector CSS nya adalah : ::marker

<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
<style>
li::marker { color: blue; }
</style>

1. item
2. item
3. item

• item
• item
• item

Pada contoh diatas, elemen dengan tag <li> tidak terdapat penyebutan tag lainnya selain teks "item". Tapi pada tampilannya terdapat penanda urutan berupa angka untuk tag <ol> dan penanda disc pada tag <ul>

Elemen semu - penyeleksi kursor

6. ::selection

Blok atau seleksi teks (klik 3x) pada hasil contoh dibawah ini untuk melihat efeknya.

<p>Seekor serigala datang ke elang tua itu, membungkuk dengan hormat, lalu ia mengeluh, “Rajaku yang Mulia, aku sangat kelaparan sampai-sampai aku ingin menangis! Berikan aku sedikit makanan.”</p>
<style>
::selection {
       color: white;
       background : chocolate;  
       }
</style>

Seekor serigala datang ke elang tua itu, membungkuk dengan hormat, lalu ia mengeluh, “Rajaku yang Mulia, aku sangat kelaparan sampai-sampai aku ingin menangis! Berikan aku sedikit makanan.”