Pseudo-element after

Het pseudo-element after voegt tekst in na het element. Wordt alleen gebruikt in combinatie met de eigenschap content, die de in te voegen tekst specificeert.

Syntaxis

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

Voorbeeld

Laten we ervoor zorgen dat er bij het hoveren over een li tekst aan het einde wordt ingevoegd:

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

Результат:

Voorbeeld

Er kunnen verschillende stijlen worden toegepast op de ingevoegde tekst. Laten we deze tekst bijvoorbeeld in een kleur inkleuren:

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

Результат:

Zie ook