Pseudo element before

Pseudo element before elementden öň tekst goýýar. Diňe content ýöritegligi bilen bilelikde ulanylýar, bu bolsa goýulmaly teksti kesgitleýär.

Sintaksis

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

Mysal

Geliň, li elementine gelinende ona başlangyçda şu tekst goýulsyn:

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: '!!!';
}

Результат:

Mysal

Goýulýan teksti dürli stil bilen bezäp bolýar. Mysal üçin, bu teksti bir reňge boýalyň:

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: '!!!';
}

Результат:

Şeýle-de görmeli