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

Псевдоэлемент after матнни элементдан кейин киритади. Факат content хусусияти билан бирга ишлатилади, у киритиладиган матнни белгилайди.

Синтаксис

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

Мисол

Келинг, li устига курсор келтирилганда унинг охирига матн киритиладиган килиб курамиз:

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

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

Результат:

Мисол

Киритиладиган матнга турли стилларни кўллаш мумкин. Келинг, масалан, бу матнни бирон рангга бояйлик:

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

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

Результат:

Шунингдек ку́ринг