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

Псевдоэлемент after элементтен кейін мәтінді кірістіреді. Тек content сипатымен бірге қолданылады, бұл кірістіруге арналған мәтінді орнатады.

Синтаксис

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

Мысал

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

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

cssli:hover::after {
  content: '!!!';
}

Результат:

Мысал

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

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

cssli:hover::after {
  color: red;
  content: '!!!';
}

Результат:

Сондай-ақ қараңыз