Pseudo-element nima?

CSS'da pseudo-element bu kluch so'z bo'lib, u selectorga qo'shiladi va elementning ma'lum bir qismini, qo'shimcha DOM elementlarini ochiqchasiga yaratmasdan, stil bilan bezash imkonini beradi.

Eng ko'p ishlatiladigan pseudo-elementlar:

• ::before: Tanlangan elementning mazmunidan oldin yaratilgan mazmunni qo'shadi.
• ::after: Tanlangan elementning mazmunidan keyin yaratilgan mazmunni qo'shadi.
• ::first-line: Blok elementining birinchi satriga stil qo'llash.
• ::first-letter: Blok elementining birinchi harfiga stil qo'llash.
• ::selection: Foydalanuvchi tanlagan element qismiga stil qo'llash (masalan, matnni sichqoncha bilan tanlashda).
• ::placeholder: <input> yoki <textarea> maydonlaridagi placeholder matniga stil qo'llash.

::before va ::after misollari:

div::before {
  content: "Oldingi: "; // Majburiy content xususiyati
  color: blue;
}

div::after {
  content: " Yakuniy"; // Majburiy content xususiyati
  color: red;
}

::first-line va ::first-letter misollari:

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

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

Pseudo-elementlar bezash elementlarini qo'shish, kontent yaratish, matn qismlarini stilizatsiya qilish va boshqa vazifalarni bajarishda qulay, HTML tuzilishini soddalashtiradi. Tarixan ular bitta ikki nuqta (:) bilan boshlanardi, ammo CSS3 spetsifikatsiyasi pseudo-klasslar (:hover, :focus) va pseudo-elementlarni ajratish uchun ikki nuqta (::) ni kiritdi, garchi eski pseudo-elementlar uchun bitta nuqta (:) ko'p brauzarlar tomonidan hali ham qo'llab-quvvatlanadi. :: ishlatishni tavsiya etiladi.