Pseudo-elementas before

Pseudo-elementas before įterpia tekstą prieš elementą. Naudojamas tik kartu su savybe content, kuri nurodo tekstą, kurį reikia įterpti.

Sintaksė

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

Pavyzdys

Padarykime taip, kad užvedus pelę ant li į jo pradžią 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::before {
  content: '!!!';
}

Результат:

Pavyzdys

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

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::before {
  color: red;
  content: '!!!';
}

Результат:

Taip pat žiūrėkite