Các tiện ích để kiểm soát hình ảnh dấu đầu dòng cho các mục trong danh sách.
| Class | Styles |
|---|---|
list-image-[<value>] | list-style-image: <value>; |
list-image-(<custom-property>) | list-style-image: var(<custom-property>); |
list-image-none | list-style-image: none; |
Sử dụng cú pháp list-image-[<value>] để kiểm soát hình ảnh dấu đầu dòng cho các mục trong danh sách:
<ul class="list-image-[url(/img/checkmark.png)]"> <li>5 cups chopped Porcini mushrooms</li> <!-- ... --></ul>Sử dụng cú pháp list-image-(<custom-property>) để kiểm soát hình ảnh dấu đầu dòng cho các mục trong danh sách sử dụng biến CSS:
<ul class="list-image-(--my-list-image)"> <!-- ... --></ul>Đây chỉ là viết tắt cho list-image-[var(<custom-property>)] tự động thêm hàm var() cho bạn.
Sử dụng tiện ích list-image-none để loại bỏ hình ảnh dấu đầu dòng hiện có khỏi các mục trong danh sách:
<ul class="list-image-none"> <!-- ... --></ul>Prefix a list-style-image utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.