::marker
Misol
Barcha ro‘yxat elementi markerlariga rang va font-size bilan uslub bering:
::marker {
font-size: 20px;
color: red;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS ::marker psevdo-elementi ro‘yxat elementi markeriga uslub berish uchun ishlatiladi.
Bu psevdo-element display: list-item o‘rnatilgan istalgan elementda ishlaydi.
Eslatma: ::marker bilan quyidagi xususiyatlarni ishlatish mumkin:
- barcha font xususiyatlari
- barcha animation xususiyatlari
- barcha transition xususiyatlari
- color
- white-space
- content
- text-combine-upright
- unicode-bidi
- direction
| Versiya: | CSS3 |
|---|
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar psevdo-elementni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Psevdo-element | |||||
|---|---|---|---|---|---|
| ::marker | 86 | 86 | 68 | 18.1 | 72 |
CSS sintaksisi
::marker {
css declarations;
}
Ko‘proq misollar
Misol
<ul> ro‘yxatlari elementlarining markerlariga content, color va font-size bilan uslub bering:
ul li::marker {
content: "@ ";
color: pink;
font-size: 25px;
}
O‘zingiz sinab ko‘ring »
Misol
<h2> elementlariga display: list-item o‘rnating va ro‘yxat elementi markerlariga content va color bilan uslub bering:
h2 {
counter-increment: h2;
display: list-item;
}
h2::marker {
display: list-item;
content: "@" counter(h2) " ";
color: lightgreen;
}
body {
counter-reset: h2;
font-family: verdana;
margin: 50px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS psevdo-elementlar
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!