Trang này được dịch bởi Cloud Translation API.

Dấu đầu dòng tuỳ chỉnh với CSS ::points

Adam Argyle

Oriol Brufau

Hỗ trợ trình duyệt

Nguồn

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ả lập đại diện cho một phần trong tài liệu không được biểu thị trong cây tài liệu. Ví dụ: bạn có thể chọn dòng đầu tiên của một đoạn bằng cách sử dụng phần tử giả p::first-line, mặc dù không có phần tử HTML nào gói dòng văn bản đó.

Hãy xem xét danh sách không có thứ tự HTML 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>

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 hiển thị 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 phần tử danh sách đã sắp xếp.

Tạo đ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à phần tử giả ::before.

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à phần tử HTML <li>, nhưng bạn có thể sử dụng display: list-item để biế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;
}

Định 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ả cho điểm đánh dấu một cách riêng lẻ hoặc toàn bộ 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 đánh dấu so với list-style-type, nhưng nó 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. Thuộc tính background hoạt động với list-style-type nhưng không hoạt động với ::marker.

Liệt kê kiểu

li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

Kiểu danh sách ảnh hưởng đến toàn bộ mục trong danh sách.

Kiểu bút đánh dấu

li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}

Kiểu đánh dấu cho phép bạn tập trung vào điểm đánh dấu.

Thay đổi nội dung của điểm đánh dấu

Sau đây là một số ví dụ về cách tạo kiểu cho điểm đánh dấu.

Thay đổi tất 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 đã sắp xếp

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, các giá trị này được gọi là Bộ đếm và có các thuộc tính cần đặt hoặc đặt lại vị trí bắt đầu và kết thúc của số, hoặc chuyển chúng sang, ví dụ như chữ 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

Công cụ của Chrome cho nhà phát triển có thể giúp bạn kiểm tra, gỡ lỗi và sửa đổi các kiểu bạn áp dụng cho phần tử giả ::marker.

Công cụ của Chrome cho nhà phát triển mở và hiển thị các kiểu từ tác nhân người dùng và kiểu người dùng — Nội dung mô tả của Công cụ cho nhà phát triển về các kiểu điểm đánh dấu.

Tài nguyên

Bạn có thể tìm hiểu thêm về ::marker từ: