CSS ::marker
cho phép bạn
thay đổi nội dung và một số kiểu dấu đầu dòng và số trong danh sách HTML.
Giới thiệu về phần tử mô phỏng
Phần tử giả đại diện cho một phần trong tài liệu không được thể hiện trong
cây tài liệu. Ví dụ: bạn có thể chọn dòng đầu tiên của đoạn bằng cách sử dụng
phần tử giả p::first-line
, mặc dù không có gói phần tử HTML nào
dòng văn bản đó.
Hãy xem xét danh sách HTML không theo thứ tự sau:
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
<li>Dolores quaerat illo totam porro</li>
<li>Quidem aliquid perferendis voluptates</li>
<li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit
consequatur alias facilis rem</li>
<li>Fuga</li>
</ul>
Kết xuất nào sẽ hiển thị như sau với kiểu mặc định:
Dấu chấm ở đầu mỗi phần tử <ul>
được tạo trong quá trình kết xuất
danh sách và không có phần tử HTML riêng. ::marker
là một
phần tử giả đại diện cho dấu chấm đó hoặc số ở đầu một thứ tự
danh sách.
Tạo một điểm đánh dấu
Hộp đánh dấu phần tử giả ::marker
được tạo tự động bên trong mỗi
phần tử mục danh sách, trước cả nội dung thực tế và ::before
phần tử giả.
li::before {
content: "::before";
background: lightgray;
border-radius: 1ch;
padding-inline: 1ch;
margin-inline-end: 1ch;
}
Các mục trong danh sách thường là <li>
phần tử HTML, nhưng bạn có thể dùng display: list-item
để chuyển các phần tử khác thành mục trong danh sách.
<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit</dd>
<dd>Dolores quaerat illo totam porro</dd>
<dt>Ipsum</dt>
<dd>Quidem aliquid perferendis voluptates</dd>
</dl>
dd {
display: list-item;
list-style-type: "🤯";
padding-inline-start: 1ch;
}
Tạo kiểu cho điểm đánh dấu
Trước khi ::marker
ra mắt, bạn có thể tạo kiểu cho danh sách bằng cách sử dụng
list-style-type
và list-style-image
để thay đổi biểu tượng của mục trong danh sách:
li {
list-style-image: url(/right-arrow.svg);
/* OR */
list-style-type: '👉';
padding-inline-start: 1ch;
}
::marker
thêm khả năng thay đổi màu sắc, kích thước và khoảng cách của điểm đánh dấu bằng cách
cho phép bạn nhắm mục tiêu các phần tử giả đánh dấu một cách riêng lẻ hoặc trên toàn cục trong CSS của mình:
li::marker {
color: hotpink;
}
li:first-child::marker {
font-size: 5rem;
}
::marker
cung cấp cho bạn nhiều quyền kiểm soát hơn đối với các kiểu điểm đánh dấu so với list-style-type
,
nhưng không hoạt động với mọi thuộc tính CSS. Các thuộc tính sau được phép:
animation-*
transition-*
color
direction
font-*
content
unicode-bidi
white-space
Thay đổi nội dung của ::marker
bằng content
chứ không phải list-style-type
. Ví dụ tiếp theo cho thấy cách các thuộc tính của list-style-type
áp dụng cho toàn bộ mục danh sách và ::marker
cho phép bạn chỉ nhắm mục tiêu đến hộp điểm đánh dấu. background
thuộc tính hoạt động với list-style-type
, nhưng không hoạt động với ::marker
.
li:nth-child(1) { list-style-type: '?'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
li:nth-child(2)::marker { content: '!'; font-size: 2rem; background: hsl(200 20% 88%); animation: color-change 3s ease-in-out infinite; }
Thay đổi nội dung của điểm đánh dấu
Dưới đây là một số cách mẫu để tạo kiểu cho điểm đánh dấu của bạn.
Thay đổi tất cả các mục trong danh sách
li {
list-style-type: "😍";
}
/* OR */
li::marker {
content: "😍";
}
Chỉ thay đổi một mục trong danh sách
li:last-child::marker {
content: "😍";
}
Xác định điểm đánh dấu bằng SVG
li::marker {
content: url(/heart.svg);
content: url(#heart);
content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
Thay đổi danh sách được sắp xếp theo thứ tự
Còn <ol>
thì sao? Theo mặc định, điểm đánh dấu trên mục danh sách đã sắp xếp là một số, chứ không phải dấu chấm hoặc "dấu đầu dòng". Trong CSS,
Bộ đếm,
và chúng có các thuộc tính cần đặt hoặc đặt lại khi số bắt đầu và kết thúc, hoặc
chuyển chúng sang, ví dụ: số La Mã. Bạn cũng có thể sử dụng ::marker
để tạo kiểu cho bộ đếm và thậm chí sử dụng giá trị nội dung điểm đánh dấu để tạo bản trình bày đánh số của riêng mình.
li::marker {
content: counter(list-item) "› ";
color: hotpink;
}
Gỡ lỗi
Chrome Công cụ cho nhà phát triển giúp bạn kiểm tra, gỡ lỗi và sửa đổi các kiểu mà bạn áp dụng
Phần tử giả ::marker
.
Tài nguyên
Bạn có thể tìm hiểu thêm về ::marker
từ: