Какво е псевдоелемент?

CSS-те псевдоелемент — бұл кілттік сөз, ол селекторға қосылады және қосымша DOM элементтерін ашық түрде жасамай, элементтің нақты бір бөлігін стильдеуге мүмкіндік береді.

Ең жиі қолданылатын псевдоэлементтер:

• ::before: Таңдалған элементтің мазмұнынан бұрын жасалған мазмұнды қосады.
• ::after: Таңдалған элементтің мазмұнынан кейін жасалған мазмұнды қосады.
• ::first-line: Блок элементінің бірінші жолына стиль қолданады.
• ::first-letter: Блок элементінің бірінші әрпіне стиль қолданады.
• ::selection: Пайдаланушы таңдап алған элементтің бөлігін стильдейді (мысалы, мәтінді тышқанмен белгілеу кезінде).
• ::placeholder: <input> немесе <textarea> өрістеріндегі placeholder мәтінге стиль қолданады.

::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) және псевдоэлементтерді ажырату үшін екі қос нүкте (::) енгізді, дегенмен бір ғана қос нүкте (:) әлі де көптеген браузерлерде ескі псевдоэлементтер үшін қолдау көрсетіледі. :: қолдану ұсынылады.