Pseudo-element after

Pseudo-element after lisab teksti elemendi järele. Kasutatakse ainult koos omadusega content, mis määratleb lisatava teksti.

Süntaks

cssselektor::after {
  content: 'tekst';
}

Näide

Teeme nii, et li peale kursoriga viidates lisataks selle lõppu tekst:

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: '!!!';
}

Результат:

Näide

Lisatavale tekstile saab rakendada erinevaid stiile. Värvime näiteks selle teksti mõneks värvi:

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: '!!!';
}

Результат:

Vaata ka