::after
Misol
Har bir <p> elementi kontentidan keyin string qo‘shing:
p::after {
content: " - Remember this";
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS ::after psevdo-elementi ko‘rsatilgan element kontentidan keyin 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: close-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 keyin qo‘shiladi.
Muayyan element kontentidan oldin biror kontent qo‘shish uchun ::beforedan foydalaning.
| Versiya: | CSS2 |
|---|
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar psevdo-elementni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Psevdo-element | |||||
|---|---|---|---|---|---|
| ::after | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
CSS sintaksisi
::after {
css declarations;
}
Ko‘proq misollar
Misol
Har bir <p> elementi kontentidan keyin string qo‘shing va qo‘shilgan kontentga uslub bering:
p::after {
content: " - Remember 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: ::before
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!