Pseudoprvěk after

Pseudoprvěk after vkládá text za prvek. Používá se pouze společně se vlastností content, která nastavuje text, který má být vložen.

Syntaxe

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

Příklad

Pojďme zařídit, aby po najetí myší na li byl na jeho konec vložen text:

html<ul>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
</ul>

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

Результат:

Příklad

K vkládanému textu lze aplikovat různé styly. Obarvíme například tento text nějakou barvou:

html<ul>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
  <li>položka seznamu</li>
</ul>

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

Результат:

Viz také