CSS ::before va ::after: pseudo-elementlar va content

Qisqacha: Pseudo-element — HTML'da yo'q, lekin CSS yaratadigan yoki ajratib oladigan "virtual qism". ::before va ::after element ichining boshiga va oxiriga bezak qo'shadi — faqat content xususiyati bilan: content: "" — bo'sh shakl, content: attr(data-achchiq) — atribut qiymati. Bu matnni ekran o'quvchi ham o'qiydi: bezakni content: "★" / "" bilan yashiring, muhim ma'lumotni esa HTML'da yozing. ::marker, ::placeholder, ::selection, ::first-letter esa sahifada bor, lekin alohida teg bo'lmagan qismlarni bezaydi. Pseudo-klass bitta ikki nuqta bilan (holat), pseudo-element — ikkita bilan (qism).

Bu darsda

• ::before va ::after bilan content orqali bezak qo'shasiz, attr() bilan atribut qiymatini ko'rsatasiz.
• Bezak va ma'noli kontentni farqlaysiz va alt matn bilan ekran o'quvchini to'g'ri boshqarasiz.
• ::marker, ::placeholder, ::selection, ::first-letter, ::first-line, ::backdrop, ::file-selector-button ni ishlatasiz.
• meter rangini o'zgartirish haqida halol javobni bilasiz: standart yo'l yo'q, brauzerlarning o'z pseudo-elementlari bor.
• : va :: farqini va pseudo-element yozish qoidalarini bilasiz.

Oldin bilishingiz kerak: Mantiqiy pseudo-klasslar, Atribut selektorlari, Global atributlar, Accessibility daraxti.

1. Nega bu kerak?

HTML qismida va o'tgan darslarda to'rtta va'da to'plandi:

• achchiq taom kartasida qalampir belgisi (Atribut selektorlari);
• majburiy maydon yorlig'ida yulduzcha (o'sha darsdagi bron formasi mashqi);
• details sarlavhasidagi uchburchak rangi (details va summary);
• meter chizig'ining rangi (Guruhlash va natija elementlari).

Birinchi ikkitasini HTML'ga <span>🌶</span> yoki <span>*</span> qo'shib ham qilsa bo'ladi. Lekin bu bezak — mazmun emas. U HTML'ni to'ldirib yuboradi va har sahifada qo'lda yoziladi. Qolgan ikkitasi uchun esa teg umuman yo'q: uchburchak va meter chizig'i — brauzer chizadigan qismlar.

Tort ustidagi krem naqshni eslang. Tortning o'zi — xamir va qaymoq — bu HTML. Naqsh tortning bir qismidek ko'rinadi, lekin uni oxirida, bezak uchun qo'yishadi. Xuddi shunday, pseudo-element (pseudo-element) — HTML'da yozilmagan, lekin CSS yaratadigan yoki ajratib ko'rsatadigan qism. "Pseudo" — o'tgan darslardagi kabi "go'yo": go'yo element.

2. ::before va ::after

2.1 Birinchi bezak

<style>
  h2::before {
    content: "";
    border-left: 6px solid #2f6b3a;
    margin-right: 8px;
  }
  .taom-karta.mashhur h3::after {
    content: " ★";
    color: #b4461a;
  }
</style>
<h2>Issiq taomlar</h2>
<article class="taom-karta mashhur">
  <h3>Osh</h3>
  <p>35 000 so'm</p>
</article>
<article class="taom-karta">
  <h3>Manti</h3>
  <p>30 000 so'm</p>
</article>

Nimaga qarang: sarlavha oldida yashil tik chiziq paydo bo'ldi, mashhur oshning nomidan keyin — qizg'ish yulduzcha. HTML'da na chiziq, na yulduzcha bor.

Yozilishi: selektor, ikkita ikki nuqta va pseudo-element nomi. ::before element ichidagi hamma narsadan oldin, ::after — hammasidan keyin yangi qism yaratadi. Ular elementning tashqarisida emas, ichida turadi — go'yo birinchi va oxirgi bola:

<h3> ::before  Osh  ::after </h3>

Shuning uchun ular elementning shriftini va rangini meros oladi. Sukut bo'yicha ular matn kabi qator ichida turadi. DevTools'ning Elements panelida ham ::before va ::after alohida qator bo'lib ko'rinadi.

2.2 content — majburiy kalit

content bo'lmasa, pseudo-element umuman yaratilmaydi. Chrome'da tekshirdik: p::before { color: red; } — hech narsa chiqmadi, chunki content yozilmagan. Bu eng ko'p uchraydigan xato.

content qiymatlari:

• "matn" — qo'shtirnoqdagi matn. Bo'sh joy ham qo'shtirnoq ichida: " ★".
• "" — bo'sh matn. Pseudo-element yaratiladi, lekin ichi bo'sh — uni ramka yoki fon bilan shaklga aylantirasiz. Yuqoridagi tik chiziq aynan shunday: bo'sh qismning chap ramkasi.
• attr(nom) — atribut qiymati (pastda, alohida bo'limda).
• url(...) — rasm, counter() — avtomatik raqam (Ro'yxatlar va jadvallar stili darsida).

Maxsus belgini kodi bilan ham yozish mumkin: "\2192" — "→" belgisi. Teskari chiziqdan keyin Unicode kodi keladi. Faylingiz UTF-8 da bo'lgani uchun belgining o'zini yozsangiz ham bo'ladi — bu o'qishga qulayroq.

2.3 Qayerda ishlamaydi

::before va ::after ga "ich" kerak. Ichida kontent bo'lmaydigan elementlarda — img, matn maydoni input — ular chizilmaydi. Chrome'da tekshirdik: input ning pseudo-elementi matn maydonida ko'rinmadi, checkbox'da esa ko'rindi. Natija brauzer va element turiga bog'liq, shuning uchun bunday elementlarga tayanmang. Maydon yoniga bezak kerak bo'lsa, uni label ga yoki o'rab turgan div ga qo'shing.

Tekshirib ko'ring: .narx::after { content: "so'm"; } yozildi, HTML'da <span class="narx">35 000</span>. Ekranda nima ko'rinadi va nega yozuv yopishib qoladi?

3. attr() va achchiqlik belgisi

3.1 Atribut qiymatini ko'rsatish

attr() — elementning atribut qiymatini content ga olib keladi. Matn bilan birga yozish mumkin — bo'laklar orasiga vergul qo'yilmaydi:

.taom-karta[data-achchiq]::after {
  content: " (achchiqligi: " attr(data-achchiq) ")";
}

data-achchiq="2" li kartada oxirida "(achchiqligi: 2)" chiqadi. Chrome'da tekshirdik. Atribut qiymati o'zgarsa, matn ham o'zi yangilanadi.

content ichidagi attr() hamma brauzerda eski zamonlardan beri ishlaydi. attr() ning yangi, kengaytirilgan shakli ham bor — qiymatni rang yoki o'lcham sifatida o'qiydi. Lekin u hozircha Baseline emas: Safari'da yo'q. Hozircha faqat content ichida ishlating.

3.2 Qalampir belgisi

Atribut selektorlari darsida "achchiqlik belgisini karta burchagida chizish mumkin" degan edik. Mana — hozircha nomdan keyin; burchakka joylashni position darsida o'rganamiz:

<style>
  .taom-karta h3::after {
    color: #b4461a;
  }
  [data-achchiq="1"] h3::after {
    content: " 🌶";
    content: " 🌶" / "achchiqligi 1 dan 3";
  }
  [data-achchiq="2"] h3::after {
    content: " 🌶🌶";
    content: " 🌶🌶" / "achchiqligi 2 dan 3";
  }
  [data-achchiq="3"] h3::after {
    content: " 🌶🌶🌶";
    content: " 🌶🌶🌶" / "achchiqligi 3 dan 3";
  }
</style>
<article class="taom-karta" data-achchiq="0">
  <h3>Osh</h3>
</article>
<article class="taom-karta" data-achchiq="2">
  <h3>Chuchvara</h3>
</article>
<article class="taom-karta achchiq" data-achchiq="3">
  <h3>Lag'mon</h3>
</article>

Nimaga qarang: oshda qalampir yo'q, chuchvarada ikkita, lag'monda uchta. Qalampirlar qizg'ish — ular color ni oladi. Har qoidada content nega ikki marta yozilgan va / dan keyingi matn nima? Buni keyingi bo'limda ochamiz.

4. Bezakmi yoki ma'no? Ekran o'quvchi nimani eshitadi

4.1 Chrome'da tekshirdik

Pseudo-element matni DOM'da yo'q, lekin brauzer uni accessibility daraxtiga qo'shadi. Uch variantni Chrome'ning accessibility daraxtida tekshirdik:

Birinchi qatorga e'tibor bering: bezak uchun qo'yilgan yulduzchani ekran o'quvchi ovoz chiqarib o'qiydi. Aniq so'zi dasturga bog'liq, lekin bu shovqin. Qalampirli kartada esa alt matnsiz qalampir belgisining nomi uch marta eshitilardi.

Yana ikki fakt. Pseudo-element matnini sichqoncha bilan belgilab, nusxa olib bo'lmaydi — Chrome'da tekshirdik, JavaScript o'qigan matnda ham u yo'q. CSS yuklanmasa, u butunlay yo'qoladi.

4.2 Alt matn: / dan keyin

content: "ko'rinish" / "o'qilishi" — qiyshiq chiziqdan keyingi qism alt matn (alternative text): ekran o'quvchi ko'rinadigan belgi o'rniga shuni o'qiydi. Xuddi img dagi alt kabi (Yaxshi alt matn yozish). Bo'sh alt (/ "") — "bu bezak, o'qima".

Bu sintaksis 2024-yil iyulidan hamma asosiy brauzerlarda bor — yangi Baseline, eski brauzerlarda ishlamaydi (Veb standartlari). Eski brauzer / ni tushunmaydi va butun deklaratsiyani tashlaydi — qalampir ham ko'rinmay qoladi.

Shuning uchun content ikki marta yozildi: eski brauzer birinchisini oladi, ikkinchisini tashlaydi. Yangisi ikkinchisini oladi — pastdagi yutadi. Bu CSS nima darsidagi "brauzer tushunmaganini tashlab ketadi" qoidasining foydali tomoni.

4.3 Qoida

MDN tavsiyasi: pseudo-element matni bezak bo'lmasa, u ekran o'quvchiga yetib borishini va CSS o'chganda ham mavjudligini tekshiring. Ba'zi brauzer va ekran o'quvchi juftliklari uni umuman e'lon qilmaydi. Amalda:

• Bezak — chiziq, strelka, yulduzcha, qalampir rasmi: content + bo'sh alt / "".
• Qo'shimcha izoh — belgi ma'no beradi, lekin sahifa usiz ham tushunarli: alt matn bilan ("achchiqligi 3 dan 3").
• Muhim ma'lumot — narx, ogohlantirish, xato matni: faqat HTML'da.

flowchart TD
  Q{"Belgi olib<br/>tashlansa,<br/>nima yo'qoladi?"}
  Q -->|"hech narsa"| B["Bezak:<br/>bo'sh alt matn"]
  Q -->|"qo'shimcha izoh"| I["Izoh:<br/>so'zli alt matn"]
  Q -->|"muhim ma'lumot"| H["Belgi emas,<br/>HTML'ga yozing"]

Nimaga qarang: savol bitta — belgini o'chirsangiz, mehmon nimanidir yo'qotadimi. Javobga qarab uch yo'ldan biri tanlanadi.

Achchiqlik qaysi guruhda? Aksariyat mehmon uchun — qo'shimcha. Lekin achchiq ovqat yeya olmaydigan mehmon uchun muhim. Shuning uchun real «Bahor» menyusida kartada matn ham bo'lishi kerak: <p>Achchiq</p>. Qalampir esa uni ko'rinarli qiladi.

4.4 Majburiy maydon yulduzchasi

Atribut selektorlari darsidagi ikkinchi va'da. Yulduzcha — ko'radigan mehmon uchun belgi. Ekran o'quvchi esa required atributini o'zi "required" deb e'lon qiladi — yulduzchani ikkinchi marta o'qitish shart emas:

<style>
  div:has(> :required) > label::after {
    content: " *";
    content: " *" / "";
    color: #b4461a;
  }
</style>
<p>* — to'ldirilishi shart bo'lgan maydonlar.</p>
<div>
  <label for="ism">Ismingiz</label>
  <input id="ism" name="ism" type="text" required>
</div>
<div>
  <label for="izoh">Qo'shimcha istaklar</label>
  <textarea id="izoh" name="izoh" rows="2"></textarea>
</div>

Nimaga qarang: "Ismingiz" yonida qizg'ish yulduzcha, ixtiyoriy izoh maydonida — yo'q. Tanlov Mantiqiy pseudo-klasslar darsidagi :has() bilan: "ichida majburiy maydon bor div ning label i". Yangi majburiy maydon qo'shsangiz, yulduzcha o'zi paydo bo'ladi.

Formaning boshidagi izoh HTML'da — "*" nimani anglatishi ko'rinib tursin. «Bahor»ning haqiqiy bron formasi teskari yo'lni tanlagan: "Hamma maydonlar majburiy, ixtiyoriylari belgilangan" (Qulay va accessible forma). Ikkalasi ham to'g'ri — muhimi, qoida formaning boshida yozilgan bo'lsin.

Tekshirib ko'ring: Karta sarlavhasidan keyin ::after bilan "(tugadi)" yozuvi qo'shildi — bugun porsiya qolmagan. Bu yaxshi yechimmi?

5. ::marker — ro'yxat va summary belgisi

::marker — li oldidagi nuqta yoki raqam, summary oldidagi uchburchak. details va summary darsidagi va'da — FAQ uchburchagini «Bahor» rangiga bo'yaymiz va ochiq-yopiq holatda belgini almashtiramiz:

<style>
  summary::marker {
    color: #b4461a;
    content: "+ ";
  }
  details[open] summary::marker {
    content: "− ";
  }
  li::marker {
    color: #2f6b3a;
  }
</style>
<details>
  <summary>Bronni qanday bekor qilaman?</summary>
  <p>Telefon qiling: +998 90 000 00 00.</p>
</details>
<details open>
  <summary>Choyxona necha soatda yopiladi?</summary>
  <p>Har kuni 23:00 da.</p>
</details>
<ul>
  <li>Osh</li>
  <li>Lag'mon</li>
</ul>

Nimaga qarang: yopiq savol oldida qizg'ish "+", ochig'ida "−". Savolni bossangiz, belgi o'zi almashadi — details[open] ni Atribut selektorlari darsida o'rgangan edik. Ro'yxat nuqtalari yashil, matn esa qora qoldi.

::marker da hamma xususiyat ishlamaydi. MDN ro'yxati: rang (color), shrift xususiyatlari, content, white-space, animatsiya va yana bir nechtasi. Fon yoki ichki bo'sh joy — yo'q.

Brauzerlarda farq katta: ::marker Baseline emas (Veb standartlari). MDN ma'lumotiga ko'ra, Safari'da u faqat color va font-size ni qo'llaydi — content ishlamaydi.

summary bilan Safari'da yana bir farq bor: uning uchburchagiga ::marker umuman ta'sir qilmaydi (u yerda nostandart ::-webkit-details-marker ishlaydi). Natija: Safari'da oddiy uchburchak qoladi — hech narsa buzilmaydi, faqat bezak yo'q.

Hamma brauzerda bir xil ko'rinish kerak bo'lsa, markerni butunlay o'chirib, belgini ::before bilan chizishadi. Markerni o'chirish (list-style: none) va uning Safari'dagi tuzog'ini Ro'yxatlar va jadvallar stili darsida, chiroyli akkordeonni Tabs va accordion darsida ko'ramiz.

6. Matn qismlari: ::first-letter va ::first-line

Eski kitoblarda bob katta, bezakli bosh harf bilan boshlanadi. CSS'da bu — ::first-letter:

<style>
  p::first-letter {
    color: #2f6b3a;
    font-size: 32px;
    font-weight: bold;
  }
  p::first-line {
    color: #5b6660;
  }
</style>
<p>«Bahor» choyxonasi har kuni ertalab yettida ochiladi.
Oshpaz Rustam aka qozonni tong saharda osadi, shuning
uchun birinchi mehmonlarga issiq osh tayyor bo'ladi.</p>

Nimaga qarang: paragrafning birinchi harfi katta va yashil. Chrome'da tekshirdik: oldidagi « qo'shtirnoq ham harf bilan birga bezaldi — standart shunday talab qiladi. Birinchi qator esa kulrang. Oynani torroq qilsangiz, "birinchi qator"ga kamroq so'z sig'adi — ::first-line har safar ekrandagi haqiqiy qatorni oladi.

Ikkalasi faqat blok elementlarda (paragraf, div) ishlaydi va ularda ham xususiyatlar cheklangan: asosan shrift, rang va fon.

7. Forma qismlari: ::placeholder va ::file-selector-button

7.1 ::placeholder

::placeholder — bo'sh maydondagi namuna matn. Holat pseudo-klasslari darsidagi :placeholder-shown bilan adashtirmang: u — holat (maydon bo'sh, namuna ko'rinib turibdi), bu — qism (namuna matnning o'zi).

Brauzerlar namunani och kulrang chizadi va ba'zan u o'qib bo'lmaydigan darajada och bo'ladi. Namuna ham matn — unga ham Accessibility darsidagi 4.5:1 kontrast talabi qo'yiladi. «Bahor»ning #5b6660 rangi oq fonda 6:1 ga yaqin kontrast beradi:

::placeholder {
  color: #5b6660;
}

label darsidagi qoida o'zgarmaydi: namuna yorliq o'rnini bosmaydi, u yozish boshlanishi bilan yo'qoladi.

7.2 ::file-selector-button

Fayl yuklash maydoni darsidagi "Choose File" tugmasi — input ichidagi alohida qism. Uni ::file-selector-button bilan bezaysiz:

<style>
  input::file-selector-button {
    background-color: #2f6b3a;
    color: #ffffff;
    border: 0;
    padding: 6px 12px;
  }
</style>
<label for="chek">To'lov cheki</label>
<input type="file" id="chek" name="chek">

Nimaga qarang: fayl tanlash tugmasi «Bahor» yashilida, yonidagi "No file chosen" yozuvi esa o'zgarmadi — u tugma emas. Bu pseudo-element hamma asosiy brauzerlarda bor. Formadagi boshqa elementlarni bezashni Forma elementlarini zamonaviy stillash darsida davom ettiramiz.

8. ::selection, ::backdrop va ::cue

8.1 ::selection — belgilangan matn

Matnni sichqoncha bilan belgilaganda u ko'k fonda bo'ladi. ::selection bu ranglarni o'zgartiradi:

::selection {
  background-color: #2f6b3a;
  color: #ffffff;
}

Faqat rang, fon, matn bezagi va soya xususiyatlari ishlaydi. ::selection ham Baseline emas: u iPhone'dagi Safari'da yo'q. Zarari yo'q: u yerda oddiy ko'k belgilash qoladi. Bunday bezakni bemalol qo'yish mumkin, chunki usiz hech narsa buzilmaydi.

8.2 ::backdrop — modal oyna ortidagi parda

dialog darsidagi modal oyna ochilganda sahifa ustiga parda tushadi. Bu parda — ::backdrop:

<style>
  dialog::backdrop {
    background-color: #1f2a24b3;
  }
  dialog {
    border: 3px solid #2f6b3a;
  }
</style>
<button type="button" commandfor="bekor-oyna"
        command="show-modal">
  Bronni bekor qilish
</button>
<dialog id="bekor-oyna">
  <p>Bronni bekor qilasizmi?</p>
  <form method="dialog">
    <button>Yopish</button>
  </form>
</dialog>

Nimaga qarang: tugmani bosing — sahifa to'q yashil-kulrang parda ostida qoladi, oyna esa ustida. #1f2a24b3 — «Bahor» matn rangi, oxiridagi b3 uni yarim shaffof qiladi (Ranglar 1 darsida). Tugma oynani JavaScript'siz ochadi — Invoker commands darsidagi usul. U yangi: 2025-yil dekabrida Baseline bo'lgan, eski brauzerda tugma hech narsa qilmaydi. ::backdrop ning o'zi esa widely available. Top layer va popover'larni to'liq Top layer darsida bezaymiz.

8.3 ::cue — subtitrlar

Subtitrlar darsidagi track subtitrlarini ::cue bilan bezaysiz:

::cue {
  color: #fffaf0;
  background-color: #1f2a24;
}

U hamma asosiy brauzerlarda ishlaydi. Xususiyatlar cheklangan: rang, fon, shrift va yana bir nechtasi.

9. meter rangi — halol javob

Guruhlash va natija elementlari darsida "meter ranglarini CSS bilan o'zgartirasiz" degan edik. Aniqlik kiritamiz. Bugun buning standart yo'li yo'q. Tekshirdik: Chrome'da accent-color ham meter rangini o'zgartirmadi.

Brauzerlarning o'z, nostandart pseudo-elementlari bor. Ularning nomi brauzer dvigateli (Brauzer tuzilishi va dvigatellar) belgisi — prefiks bilan boshlanadi: -webkit- — Safari dvigateli va undan kelib chiqqan Chrome, Edge; -moz- — Firefox:

<style>
  meter {
    width: 200px;
    height: 16px;
  }
  meter::-webkit-meter-optimum-value {
    background-color: #2f6b3a;
  }
  meter::-webkit-meter-even-less-good-value {
    background-color: #b4461a;
  }
</style>
<p>Bo'sh stollar:
  <meter min="0" max="40" low="10" high="25" optimum="40"
         value="32">40 dan 32</meter> 32</p>
<p>Bo'sh stollar:
  <meter min="0" max="40" low="10" high="25" optimum="40"
         value="6">40 dan 6</meter> 6</p>

Nimaga qarang: Chrome'da 32 ta bo'sh stol «Bahor» yashilida, 6 tasi qizg'ishda — standart yashil va qizil o'rniga brend ranglari. O'rta (sariq) oraliqqa qoida yozmadik, u brauzer rangida qoladi. Yonida son ham yozilgan — rang yolg'iz ma'lumot bermaydi.

Uchta halol ogohlantirish:

1. MDN bu pseudo-elementlarni nostandart deb belgilaydi va haqiqiy saytda (production) tavsiya etmaydi. Standart yo'l yo'q joyda ishlatish mumkin, lekin ertaga o'zgarishi mumkinligini biling.
2. Har brauzerga alohida qoida. Firefox uchun ::-moz-meter-bar, MDN'ga ko'ra meter ga appearance: none bilan birga. appearance: none — brauzer chizgan standart ko'rinishni o'chiradi (Forma elementlarini zamonaviy stillash darsida). MDN'ning yozishicha, Safari'da ham ::-webkit-meter-* bezagi ishlashi uchun appearance: none kerak. Biz buni faqat Chrome'da tekshira oldik.
3. Ularni bitta ro'yxatga birlashtirmang. meter::-webkit-meter-bar, meter::-moz-meter-bar { ... } — Chrome -moz- ni tanimaydi va butun qoidani tashlaydi. Chrome'da tekshirdik. Asosiy selektorlar darsidagi qoida shu yerda ham ishlaydi. :is() ham qutqarmaydi: uning ichida pseudo-element bo'lmaydi.

«Bahor» uchun xulosa: standart ranglar ham yaxshi. Brend rangi juda kerak bo'lsa — yuqoridagi usul, har dvigatelga alohida qoida bilan.

10. : va ::, va yozish qoidalari

10.1 Bitta yoki ikkita ikki nuqta

Eski CSS'da pseudo-elementlar ham bitta ikki nuqta bilan yozilardi: :before. Keyinroq ularni pseudo-klasslardan ajratish uchun :: kiritildi. Moslik uchun to'rtta eski pseudo-element — :before, :after, :first-line, :first-letter — hali ham bitta ikki nuqta bilan ishlaydi. Chrome'da tekshirdik. Yangilari esa faqat :: bilan: input:placeholder — noto'g'ri selektor, brauzer uni tashladi.

Qoida: pseudo-elementni doim :: bilan yozing. Eski kodda :before ni uchratsangiz — bu xato emas, shunchaki eski uslub.

10.2 Bitta va oxirida

Selektorda faqat bitta pseudo-element bo'ladi va u eng oxirida turadi. Pseudo-klass undan oldin keladi:

/* ✅ sichqoncha havola ustida — keyin uning ::after qismi */
a:hover::after {
  color: #b4461a;
}

/* ❌ tartib teskari — Chrome bu qoidani tashladi */
a::after:hover {
  color: #b4461a;
}

10.3 Boshqa pseudo-elementlar

11. Ko'p uchraydigan xatolar

11.1 content unutilgan

li::before { color: #2f6b3a; } — hech narsa chiqmaydi. Tuzatish: content: "" yoki kerakli matn.

11.2 img yoki input ga ::after

Ichi yo'q elementda chizilmaydi. Tuzatish: bezakni label ga yoki o'rab turgan elementga qo'shing.

11.3 Muhim ma'lumot content da

Narx, "tugadi", xato matni — ekran o'quvchida eshitilmasligi, CSS yuklanmasa yo'qolishi mumkin. Tuzatish: ma'lumot — HTML'da, CSS'da faqat ko'rinish.

11.4 Bezak ovoz chiqarib o'qiladi

content: "★" — ekran o'quvchi belgi nomini o'qiydi. Tuzatish: content: "★"; content: "★" / "";.

11.5 Brauzer prefiksli selektorlar bitta ro'yxatda

::-webkit-... va ::-moz-... vergul bilan — butun qoida tashlanadi. Tuzatish: har biriga alohida qoida.

11.6 Tartib: ::after:hover

Qoida tashlanadi. Tuzatish: :hover::after.

12. Mashqlar

1-mashq (oson): Yangi va mashhur

«Bahor» menyusida taom-karta yangi va taom-karta mashhur kartalari bor. CSS yozing:

1. Yangi taom nomidan oldin "Yangi: " yozuvi, qizg'ish (#b4461a) va qalin.
2. Mashhur taom nomidan keyin yulduzcha "". Yulduzcha — faqat bezak, ekran o'quvchi uni o'qimasin.

Ishora: "Yangi" so'zi ma'lumot — alt matn kerak emas, ekran o'quvchi uni o'qigani yaxshi. Yulduzcha uchun eski brauzer zaxirasi bilan ikki content.

<style>
  .taom-karta.yangi h3::before {
    content: "Yangi: ";
    color: #b4461a;
    font-weight: bold;
  }
  .taom-karta.mashhur h3::after {
    content: " ★";
    content: " ★" / "";
  }
</style>
<article class="taom-karta yangi">
  <h3>Tandir go'sht</h3>
</article>
<article class="taom-karta mashhur">
  <h3>Osh</h3>
</article>

2-mashq (o'rta): FAQ va izoh maydoni

«Bahor»ning savol-javob bo'limi va bron formasidagi izoh maydoni uchun:

1. Yopiq savol belgisi — "▸ ", ochig'i — "▾ ", ikkalasi ham #2f6b3a.
2. Izoh maydonidagi namuna matn (placeholder="Masalan: tug'ilgan kun") — #5b6660.
3. Savol matni ustiga sichqoncha kelganda qizg'ish bo'lsin (#b4461a).

Ishora: 1-band — summary::marker va details[open] summary::marker. 3-band — Holat pseudo-klasslari darsidagi :hover, pseudo-element emas.

<style>
  summary::marker {
    content: "▸ ";
    color: #2f6b3a;
  }
  details[open] summary::marker {
    content: "▾ ";
  }
  summary:hover {
    color: #b4461a;
  }
  ::placeholder {
    color: #5b6660;
  }
</style>
<details>
  <summary>Oldindan to'lov kerakmi?</summary>
  <p>Oddiy bron uchun — yo'q.</p>
</details>
<p>
  <label for="izoh">Qo'shimcha istaklar (ixtiyoriy)</label>
  <textarea id="izoh" name="izoh" rows="2"
            placeholder="Masalan: tug'ilgan kun"></textarea>
</p>

3-mashq (qiyin): Stajyorning pseudo-elementlari

Stajyor menyu sahifasiga shunday CSS yozdi va "hech biri ishlamayapti" dedi:

.narx::after { font-weight: bold; color: #b4461a; }
input[type="tel"]::before { content: "+998 "; }
.taom-karta::after:hover { content: " — buyurtma bering"; }
meter::-webkit-meter-optimum-value,
meter::-moz-meter-bar { background-color: #2f6b3a; }
.taom-karta[data-porsiya="0"] h3::after { content: " (tugadi)"; }

1. Har qatorning muammosini toping. Qaysi biri ishlaydi, lekin baribir noto'g'ri?
2. Tuzating.

Ishora: content majburiyligi, "Qayerda ishlamaydi", meter rangi, pseudo-element tartibi va "Bezakmi yoki ma'no?" bo'limlarini qayta ko'ring.

.narx {
  font-weight: bold;
  color: #b4461a;
}
.taom-karta:hover::after {
  content: " — buyurtma bering";
}
meter::-webkit-meter-optimum-value {
  background-color: #2f6b3a;
}
meter::-moz-meter-bar {
  background-color: #2f6b3a;
}
.taom-karta[data-porsiya="0"] {
  color: #5b6660;
}

4-mashq: Portfolio qadami — bezak qismlari

Portfolio HTML'iga tegmaymiz. asosiy.css ga qo'shing:

1. Boshqa saytga olib boradigan havolalar (https:// bilan boshlanadi) oxirida "↗" belgisi. Ekran o'quvchi uning o'rniga ", boshqa sayt" deb o'qisin. Eski brauzer zaxirasini unutmang.
2. Aloqa sahifasidagi savol-javob belgisi — portfolio rangingizda.
3. Belgilangan matn — portfolio rangi fonida oq matn.

Ishora: 1-band — Atribut selektorlari darsidagi ^=, ::after va alt matn bo'limidagi ikki content. 2-band — details[name="savollar"] summary::marker. 3-band — ::selection.

/* Boshqa saytga havola: ko'z uchun belgi, quloq uchun so'z */
a[href^="https://"]::after {
  content: " ↗";
  content: " ↗" / ", boshqa sayt";
}

/* Savol-javob belgisi */
details[name="savollar"] summary::marker {
  color: #1f6f4a;
}

/* Belgilangan matn */
::selection {
  background-color: #1f6f4a;
  color: #ffffff;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  :where(h1, h2, h3) { color: #1f6f4a; }
  a[href^="https://"]::after {
    content: " ↗";
    content: " ↗" / ", boshqa sayt";
  }
  details[name="savollar"] summary::marker {
    color: #1f6f4a;
  }
  ::selection {
    background-color: #1f6f4a;
    color: #ffffff;
  }
</style>
<h1>Aloqa</h1>
<p>
  Eng tez yo'l —
  <a href="https://t.me/sizning_kanal">Telegram</a>.
  Email: <a href="mailto:aziz@example.com">aziz@example.com</a>.
</p>
<h2>Ko'p so'raladigan savollar</h2>
<details name="savollar">
  <summary>Qancha vaqtda javob berasiz?</summary>
  <p>Odatda bir kun ichida.</p>
</details>

13. Real ishda

• Ikonkalar va bezaklar — "tashqi havola" belgisi, ajratuvchi chiziqlar, yorliq ("Yangi", "Chegirma") — real saytlarda ko'pincha pseudo-elementlar bilan chiziladi. HTML toza qoladi.
• Butun karta bosiladigan bo'lishi uchun mashhur usul — havolaning ::after qismini kartaning butun maydoniga yoyish. Buni Kartalar darsida quramiz.
• Accessibility auditlari content dagi matnni alohida tekshiradi: muhim ma'lumot CSS'da qolmaganmi, bezak ovoz chiqarib o'qilmayaptimi.
• Tailwind (kursda alohida o'rganamiz) before:, after:, placeholder:, marker: yozuvlari bilan xuddi shu pseudo-elementlarni boshqaradi (Tailwind variantlari).
• Intervyuda so'raladi: "Pseudo-klass va pseudo-element farqi?", "::before ishlashi uchun nima shart?", "Nega img::after ishlamaydi?".

Xulosa

• Pseudo-element — HTML'da yo'q, CSS yaratadigan yoki ajratadigan qism; :: bilan yoziladi, selektor oxirida bitta bo'ladi.
• ::before/::after — element ichining boshi va oxiri; content siz yaratilmaydi; img va matn maydonida chizilmaydi.
• attr() atribut qiymatini content ga olib keladi — achchiqlik darajasi kabi.
• Ekran o'quvchi content ni o'qiydi: bezakka / "", izohga alt matn, muhim ma'lumot — faqat HTML'da. / — yangi Baseline, zaxira uchun content ni ikki marta yozing.
• ::marker, ::placeholder, ::selection, ::first-letter, ::backdrop, ::file-selector-button — tayyor qismlar; ::marker va ::selection Baseline emas, lekin usiz hech narsa buzilmaydi.
• meter rangi: standart yo'l yo'q; ::-webkit-meter-* va ::-moz-meter-bar — nostandart, har biri alohida qoidada.

Keyingi dars: Kaskad — bir elementga bir necha qoida to'g'ri kelganda brauzer qaysi birini tanlashini o'rganamiz.

Manbalar

• MDN: "Pseudo-elements", "::before", "::after", "content" (Accessibility bo'limi), "::marker", "::selection", "::backdrop", "::-webkit-meter-optimum-value", "::-moz-meter-bar", "
  " — developer.mozilla.org
• W3C: "CSS Pseudo-Elements Module Level 4" — w3.org/TR/css-pseudo-4
• W3C: "CSS Generated Content Module Level 3" (alt matn) — w3.org/TR/css-content-3
• web-features (Baseline ma'lumotlari): "alt-text-generated-content", "marker", "selection", "attr" — github.com/web-platform-dx/web-features
• MDN browser-compat-data: css.selectors.marker (Safari eslatmasi), html.elements.summary.display_list_item — github.com/mdn/browser-compat-data