Pseudoelement after

Pseudoelement after vstavi besedilo za elementom. Uporablja se samo skupaj z lastnostjo content, ki določa besedilo, ki ga je treba vstaviti.

Sintaksa

cssizbirnik::after {
  content: 'besedilo';
}

Primer

Naredimo tako, da se ob preletu miške nad li na njegov konec vstavi besedilo:

html<ul>
  <li>seznamski element</li>
  <li>seznamski element</li>
  <li>seznamski element</li>
  <li>seznamski element</li>
  <li>seznamski element</li>
</ul>

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

Результат:

Primer

K vstavljenemu besedilu lahko uporabimo različne stile. Pobarvajmo na primer to besedilo v kakšno barvo:

html<ul>
  <li>seznamski element</li>
  <li>seznamski element</li>
  <li>seznamski element</li>
  <li>seznamski element</li>
  <li>seznamski element</li>
</ul>

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

Результат:

Glejte tudi