Pseudo-elemen before

Pseudo-elemen before menyisipkan teks sebelum elemen. Hanya digunakan bersama-sama dengan properti content, yang menetapkan teks yang akan disisipkan.

Sintaksis

selektor::before {
	content: 'teks';
}

Contoh

Mari kita buat agar saat mengarahkan kursor ke li, teks disisipkan di awalnya:

<ul>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
	<li>list item</li>
</ul>

li:hover::before {
	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::before {
	color: red;
	content: '!!!';
}

Lihat juga

pseudo-elemen after,
yang melakukan penyisipan setelah teks tag
fungsi attr,
yang mendapatkan nilai atribut tag
properti counter-increment,
yang menetapkan penomoran otomatis