Псевдоэлемент деген эмне?

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