Псеудоэлемент чист?

Псевдоэлемент дар CSS — калимаи калидӣ аст, ки ба селектор илова карда мешавад ва имкон медиҳад, ки қисми муайяни элемент бе эҷодиёти равшан дар DOM, бо услуби махсус ороиш дода шавад.

Псевдоэлементҳои маъмултарин:

• ::before: Мазмуни тавлидшударо пеш аз мазмуни интихобшуда ворид мекунад.
• ::after: Мазмуни тавлидшударо пас аз мазмуни интихобшуда ворид мекунад.
• ::first-line: Стилҳоро ба нахустин сатр дар элементи блокӣ татбиқ мекунад.
• ::first-letter: Стилҳоро ба аввалин ҳарф дар элементи блокӣ татбиқ мекунад.
• ::selection: Стилҳоро ба қисми элементи, ки корбар интихоб кардааст (масалан, ҳангоми интихоб кардани матн бо муш), татбиқ мекунад.
• ::placeholder: Стилҳоро ба матни ҷойгузин дар майдонҳои <input> ё <textarea> татбиқ мекунад.

Масалан, истифодаи ::before ва ::after:

div::before {
  content: "Пешфикр: "; // Хусусияти зарурии content
  ранг: кабуд;
}

div::after {
  content: " Суффикс"; // Хусусияти зарурии content
  ранг: сурх;
}

Масалан, истифодаи ::first-line ва ::first-letter:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Псевдоэлементҳо барои илова кардани унсурҳои ороишӣ, тавлиди мазмун, стилгузории қисмҳои матн ва дигар вазифаҳо кӯмак мерасонанд, структураи HTML-ро содда мекунанд. Тарихан онҳо бо як нуқтаи дугона (:) оғоз меёбанд, аммо спецификацияи CSS3 ду нуқтаи дугона (::) барои фарқ кардани псевдо-классҳо (:hover, :focus) ва псевдоэлементҳо ворид кард, ҳарчанд як нуқтаи дугона (:) ҳоло ҳам дар бисёр браузерҳо барои псевдоэлементҳои кӯҳна дастгирӣ мешавад. Тавсия дода мешавад, ки :: истифода шавад.