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

Псевдоэлементи before матнро пеш аз унсур мегузорад. Танҳо якҷо бо хосияти content истифода мешавад, ки матнеро, ки бояд гузошта шавад, муайян мекунад.

Синтаксис

cssинтихобкунанда::before {
  content: 'матн';
}

Намуна

Биёед тавре кунем, ки ҳангоми нишон додан ба li ба оғози он матн гузошта шавад:

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

Результат:

Намуна

Ба матни гузоришӣ метавон аз услубҳои гуногун истифода бурд. Масалан, ин матнро ба як ранги муайян ранг кунем:

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

Результат:

Инчунин бубинед

  • псевдоэлементи after,
    ки гузоришро пас аз матни тег иҷро мекунад
  • функсияи attr,
    ки қимати атрибути тегро мегирад
  • хосияти counter-increment,
    ки нумиракунии худкорро муайян мекунад