Псевдоэлемент before

Псевдоэлемент before элементтің алдына мәтін енгізеді. Тек content сипатымен бірге қолданылады, ол енгізілетін мәтінді белгілейді.

Синтаксис

селектор::before {
	content: 'мәтін';
}

li-ге курсорды апарғанда оның алдына мына мәтін енгізілетіндей етейік:

<ul>
	<li>тізім нәрсесі</li>
	<li>тізім нәрсесі</li>
	<li>тізім нәрсесі</li>
	<li>тізім нәрсесі</li>
	<li>тізім нәрсесі</li>
</ul>

li:hover::before {
	content: '!!!';
}

Енгізілетін мәтінге әртүрлі стильдерді қолдануға болады. Мысалы, осы мәтінді әртүрлі түске бояйық:

<ul>
	<li>тізім нәрсесі</li>
	<li>тізім нәрсесі</li>
	<li>тізім нәрсесі</li>
	<li>тізім нәрсесі</li>
	<li>тізім нәрсесі</li>
</ul>

li:hover::before {
	color: red;
	content: '!!!';
}