before псевдоэлементи

before псевдоэлементи текстти элементтин алдына кошот. Ал гана content касиети менен бирге колдонулат, бул кошулуучу текстти белгилейт.

Синтаксис

cssтандооч::before {
  content: 'текст';
}

Мисал

Келгиле, бизге керек болгондо li элементинин алдына текст кошсун:

html<ul>
  <li>тизме элементи</li>
  <li>тизме элементи</li>
  <li>тизме элементи</li>
  <li>тизме элементи</li>
  <li>тизме элементи</li>
</ul>

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

Результат:

Мисал

Кошулган текстке ар кандай стилдерди колдонсо болот. Мисалы, бул текстти кандайдыр бир түскө боёйлу:

html<ul>
  <li>тизме элементи</li>
  <li>тизме элементи</li>
  <li>тизме элементи</li>
  <li>тизме элементи</li>
  <li>тизме элементи</li>
</ul>

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

Результат:

Дагы караңыз