::marker
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Phần tử giả ::marker trong CSS chọn hộp đánh dấu của một mục danh sách, thường chứa dấu chấm đầu dòng hoặc số thứ tự. Nó hoạt động trên bất kỳ phần tử hoặc phần tử giả nào được đặt thành display: list-item, chẳng hạn như các phần tử <li> và <summary>.
Try it
li::marker {
content: "✝ ";
font-size: 1.2em;
}
<p>Group known as Mercury Seven:</p>
<ul>
<li>Malcolm Scott Carpenter</li>
<li>Leroy Gordon (Gordo) Cooper Jr.</li>
<li>John Herschel Glenn Jr.</li>
<li>Virgil Ivan (Gus) Grissom</li>
<li>Walter Marty (Wally) Schirra Jr.</li>
<li>Alan Bartlett Shepard Jr.</li>
<li>Donald Kent (Deke) Slayton</li>
</ul>
Các thuộc tính được phép sử dụng
Phần tử giả ::marker hỗ trợ một số hạn chế các thuộc tính CSS, bao gồm:
- Tất cả các thuộc tính animation và transition
- Tất cả thuộc tính font
colorcontentcounter-increment,counter-resetvàcounter-setquotestext-combine-upright,unicode-bidivàdirectionwhite-space
Note: Thông số kỹ thuật cho biết có thể hỗ trợ thêm các thuộc tính CSS trong tương lai.
Cú pháp
css
::marker {
/* ... */
}
Ví dụ
HTML
html
<ul>
<li>Peaches</li>
<li>Apples</li>
<li>Plums</li>
</ul>
CSS
css
ul li::marker {
color: red;
font-size: 1.5em;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |
Tương thích trình duyệt
Xem thêm
- Các phần tử HTML có hộp đánh dấu theo mặc định:
<ol>,<li>,<summary> - Module CSS generated content
- Module CSS lists and counters
- Module CSS counter styles