Pseudoelementas after

Pseudoelementas after įterpia tekstą po elemento. Naudojamas tik kartu su savybe content, kuri nurodo, kokį tekstą reikia įterpti.

Sintaksė

cssselektorius::after {
  content: 'tekstas';
}

Pavyzdys

Padarykime taip, kad užvedus pelę ant li į jo galą būtų įterptas tekstas:

html<ul>
  <li>sąrašo elementas</li>
  <li>sąrašo elementas</li>
  <li>sąrašo elementas</li>
  <li>sąrašo elementas</li>
  <li>sąrašo elementas</li>
</ul>

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

Результат:

Pavyzdys

Prie įterpiamo teksto galima taikyti įvairius stilius. Nudažykime, pavyzdžiui, šį tekstą kokia nors spalva:

html<ul>
  <li>sąrašo elementas</li>
  <li>sąrašo elementas</li>
  <li>sąrašo elementas</li>
  <li>sąrašo elementas</li>
  <li>sąrašo elementas</li>
</ul>

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

Результат:

Taip pat žiūrėkite