content
Misol
Quyidagi misol har bir <a> elementidan keyin href atributining qiymatini qavs ichida qo‘shadi:
a::after {
content: " (" attr(href) ")";
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
content xususiyati generatsiya qilingan kontentni qo‘shish uchun ::before va ::after psevdo-elementlari bilan birga ishlatiladi.
| Standart qiymat: | normal |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS2 |
| JavaScript sintaksisi: | JavaScript yordamida elementga psevdo-klass berib bo‘lmaydi, lekin xuddi shu natijaga erishishning boshqa yo‘llari bor: Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
CSS sintaksisi
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Misol |
|---|---|---|
| normal | Standart qiymat. Agar ko‘rsatilgan bo‘lsa, kontentni normal qiymatiga o‘rnatadi, uning standart qiymati esa "none" (ya’ni hech narsa) | Sinab ko‘ring » |
| none | Agar ko‘rsatilgan bo‘lsa, kontentni bo‘sh (hech narsa) qilib o‘rnatadi | Sinab ko‘ring » |
| counter | Kontentni hisoblagich sifatida o‘rnatadi | Sinab ko‘ring » |
| attr(attribute) | Kontentni selektorning atributlaridan biri sifatida o‘rnatadi | Sinab ko‘ring » |
| string | Kontentni siz ko‘rsatgan matnga o‘rnatadi | Sinab ko‘ring » |
| open-quote | Kontentni ochuvchi qo‘shtirnoq qilib o‘rnatadi | Sinab ko‘ring » |
| close-quote | Kontentni yopuvchi qo‘shtirnoq qilib o‘rnatadi | Sinab ko‘ring » |
| no-open-quote | Agar ko‘rsatilgan bo‘lsa, kontentdan ochuvchi qo‘shtirnoqni olib tashlaydi | Sinab ko‘ring » |
| no-close-quote | Agar ko‘rsatilgan bo‘lsa, kontentdan yopuvchi qo‘shtirnoqni olib tashlaydi | Sinab ko‘ring » |
| url(url) | Kontentni biror turdagi media (rasm, ovoz, video va h.k.) qilib o‘rnatadi | Sinab ko‘ring » |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing | Sinab ko‘ring » |
Ko‘proq misollar
Misol
<ul> yoki <ol> ro‘yxatlarining standart markerlarini olib tashlab, markerga o‘xshash HTML belgisini (•) qo‘shish orqali markerlarga rang berish:
ul {
list-style: none; /* Remove HTML bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: ::before psevdo-elementi
CSS ma’lumotnomasi: ::after psevdo-elementi
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!