Pseudo-element before

Pseudo-element before lisab teksti elemendi ette. Kasutatakse ainult koos omadusega content, mis määrab lisatava teksti.

Süntaks

cssselektor::before {
  content: 'tekst';
}

Näide

Teeme nii, et li peale kursoriga viibates lisatakse selle algusesse tekst:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

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

Результат:

Näide

Lisatavale tekstile saab rakendada erinevaid stiile. Värvime näiteks selle teksti millekski värviks:

html<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

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

Результат:

Vaata ka