Az after pszeudoelem

Az after pszeudoelem szöveget szúr be az elem után. Csak a content tulajdonsággal együtt használható, ami meghatározza a beszúrandó szöveget.

Szintaxis

cssszelektor::after {
  content: 'szöveg';
}

Példa

Tegyük fel, hogy amikor az egeret a li elemre visszük, a végére szúrunk be egy szöveget:

html<ul>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ul>

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

Результат:

Példa

A beszúrt szöveg különböző stílusokat alkalmazhat. Színezzük például pirosra ezt a szöveget:

html<ul>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
  <li>listaelem</li>
</ul>

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

Результат:

Lásd még