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

Adam Argyle

Oriol Brufau

Xuất bản: Ngày 2 tháng 9 năm 2020

Sử dụng CSS ::marker để thay đổi nội dung và một số kiểu của dấu đầu dòng và số trong danh sách HTML.

Giới thiệu về phần tử giả

Phần tử giả đạ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 văn bằng cách sử dụng phần tử giả p::first-line, ngay cả khi không có phần tử HTML nào gói dòng văn bản đó.

Hãy xem 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 như sau với kiểu mặc định:

Dấu chấm ở đầu mỗi phần tử <ul> được tạo ra như một phần của 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 phần tử danh sách theo thứ tự.

Tạo điểm đánh dấu

Hộp điểm đánh dấu phần tử giả ::marker sẽ tự động được tạo 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 danh sách thường là phần tử HTML <li>, nhưng bạn có thể sử dụng display: list-item để chuyển các phần tử khác thành mục 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 được cung cấp, 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 ký hiệu mục danh sách:

li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '👉';
  padding-inline-start: 1ch;
}

::marker cho phép bạn 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 riêng lẻ hoặc trên toàn cục các phần tử giả điểm đánh dấu trong CSS:

li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}

::marker giúp bạn kiểm soát kiểu điểm đánh dấu nhiều hơn list-style-type, nhưng không hoạt động với mọi thuộc tính CSS. Bạn được phép sử dụng các thuộc tính sau:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Thay đổi nội dung của ::marker bằng cách sử dụng content, 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 vào 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: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ố ví dụ về cách tạo kiểu cho điểm đánh dấu.

Thay đổi tất cả mục danh sách

li {
  list-style-type: "😍";
}

/* OR */

li::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 theo thứ tự

Vậy còn <ol> thì sao? Điểm đánh dấu trên mục danh sách theo thứ tự là một số theo mặc định, không phải là dấu chấm hoặc "dấu đầu dòng". Trong CSS, các điểm đánh dấu này được gọi là Bộ đếm, và có các thuộc tính để đặt hoặc đặt lại vị trí bắt đầu và kết thúc của số, hoặc chuyển đổi chúng thành, ví dụ: số La Mã. Bạn cũng có thể sử dụng ::marker để tạo kiểu cho bộ đếm, 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 bạn.

li::marker {
  content: counter(list-item) " AND a ";
  color: hotpink;
}

Gỡ lỗi

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

Tài nguyên

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

• Danh sách, điểm đánh dấu và bộ đếm CSS trên Smashing Magazine
• Đếm bằng bộ đếm CSS và lưới CSS trên CSS-Tricks
• Sử dụng bộ đếm CSS trên MDN