Pseudoelement after

Pseudoelement after vkladá text za element. Používa sa iba spolu s vlastnosťou content, ktorá určuje text, ktorý sa má vložiť.

Syntax

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

Príklad

Poďme spraviť tak, aby pri nájdení myšou na li sa na jeho koniec vložil text:

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

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

Результат:

Príklad

K vkladanému textu možno aplikovať rôzne štýly. Zafarbime, napríklad, tento text na nejakú farbu:

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

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

Результат:

Pozrite tiež