Pseudo-elemen after
Pseudo-elemen after menyisipkan teks
setelah elemen. Hanya digunakan bersama-sama
dengan properti content,
yang menetapkan teks yang akan disisipkan.
Sintaks
selektor::after {
content: 'teks';
}
Contoh
Mari kita buat agar saat mengarahkan kursor ke
li, teks disisipkan di akhirnya:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::after {
content: '!!!';
}
:
Contoh
Berbagai gaya dapat diterapkan pada teks yang disisipkan. Mari warnai teks ini, misalnya, dengan warna tertentu:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::after {
color: red;
content: '!!!';
}
:
Lihat juga
-
pseudo-elemen
before,
yang melakukan penyisipan sebelum teks tag -
fungsi
attr,
yang mengambil nilai atribut tag -
properti
counter-increment,
yang menetapkan penomoran otomatis
