::before
Misol
Har bir <p> elementi kontentidan oldin string qo‘shing:
p::before {
content: "Read this: ";
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS ::before psevdo-elementi ko‘rsatilgan element kontentidan oldin biror kontent qo‘shadi.
Qo‘shiladigan kontentni belgilash uchun content xususiyatidan foydalaning. content qiymati quyidagilar bo‘lishi mumkin:
- String: content: "Hello world!";
- Rasm: content: url(myimage.jpg);
- Hech narsa: content: none;
- Hisoblagich: content: counter(li);
- Qo‘shtirnoq: content: open-quote;
- Atribut qiymati: content: " (" attr(href) ")";
Maslahat: E’tibor bering, qo‘shilgan kontent baribir ko‘rsatilgan element ichida bo‘ladi. Qo‘shilgan kontent ichkaridagi boshqa kontentdan oldin qo‘shiladi.
Muayyan element kontentidan keyin biror kontent qo‘shish uchun ::afterdan foydalaning.
| Versiya: | CSS2 |
|---|
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar psevdo-elementni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Psevdo-element | |||||
|---|---|---|---|---|---|
| ::before | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
CSS sintaksisi
::before {
css declarations;
}
Ko‘proq misollar
Misol
Har bir <p> elementi kontentidan oldin string qo‘shing va qo‘shilgan kontentga uslub bering:
p::before {
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS psevdo-elementlar
CSS psevdo-elementlar ma’lumotnomasi: ::after
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!