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

Giờ đây, việc tuỳ chỉnh màu sắc, kích thước, kiểu số hoặc dấu đầu dòng khi sử dụng <ul> hoặc <ol> là không quan trọng.

Adam Argyle
Oriol Brufau
Oriol Brufau
GitHub

Nhờ có Igalia (do Bloomberg tài trợ), cuối cùng chúng tôi cũng có thể gỡ bỏ các mẹo để tạo danh sách tạo kiểu. Đây là thẻ Xem!

Xem nguồn

Nhờ có CSS ::marker, chúng ta có thể thay đổi nội dung cũng như một số kiểu dấu đầu dòng và số.

Khả năng tương thích với trình duyệt

::marker được hỗ trợ trong Firefox cho máy tính và Android, Safari dành cho máy tính và iOS Safari (nhưng chỉ có thuộc tính color và font-*, xem Lỗi 204163) cũng như trình duyệt dựa trên Chromium và Android dành cho máy tính.

Hỗ trợ trình duyệt

  • 86
  • 86
  • 68
  • 11,1

Nguồn

Yếu tố giả

Hãy xem xét danh sách HTML cần thiết 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>

Điều gì dẫn đến kết xuất không đáng ngờ sau đây:

Dấu chấm ở đầu mỗi mục <li> là miễn phí! Trình duyệt đang vẽ và tạo một hộp đánh dấu đã tạo cho bạn.

Hôm nay, chúng ta rất vui khi được nói về phần tử giả ::marker. Phần tử này cho phép bạn tạo kiểu cho phần tử dấu đầu dòng mà trình duyệt sẽ tạo cho bạn.

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

Hộp đánh dấu giả phần tử ::marker được tạo tự động bên trong mọi phần tử mục trong danh sách, trướ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;
}

Thông thường, các mục trong danh sách là phần tử HTML <li>, nhưng các phần tử khác cũng có thể trở thành mục trong danh sách có display: list-item.

<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 điểm đánh dấu

Cho đến ngày ::marker, bạn có thể tạo kiểu cho danh sách bằng list-style-type và list-style-image để thay đổi biểu tượng mục danh sách bằng 1 dòng CSS:

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

Điều đó rất hữu ích nhưng chúng tôi cần nhiều hơn nữa. Còn việc thay đổi màu sắc, kích thước, khoảng cách, v.v thì sao? Đó chính là lúc ::marker sẽ cứu nguy cho bạn. Tính năng này cho phép nhắm mục tiêu riêng lẻ và toàn cầu của các phần tử giả này từ CSS:

li::marker {
  color: hotpink;
}

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

Thuộc tính list-style-type cho phép khả năng tạo kiểu rất hạn chế. Phần tử giả ::marker có nghĩa là bạn có thể nhắm mục tiêu cho chính điểm đánh dấu và áp dụng kiểu trực tiếp cho điểm đánh dấu đó. Chế độ này cho phép bạn kiểm soát tốt hơn rất nhiều.

Tuy nhiên, bạn không thể sử dụng mọi thuộc tính CSS trên ::marker. Danh sách thuộc tính được phép và không được phép được nêu rõ trong phần thông số kỹ thuật. Nếu bạn thử một nội dung thú vị với phần tử giả này nhưng nó không hoạt động, thì danh sách dưới đây là hướng dẫn cho bạn về những việc có thể và không thể làm với CSS:

Các tài sản CSS ::marker được phép

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

Việc thay đổi nội dung của ::marker được thực hiện bằng content thay vì list-style-type. Trong ví dụ tiếp theo, mục đầu tiên được tạo kiểu bằng list-style-type và mục thứ hai bằng ::marker. Các thuộc tính trong trường hợp đầu tiên áp dụng cho toàn bộ mục danh sách, không chỉ điểm đánh dấu, có nghĩa là văn bản cũng đang tạo ảnh động. Khi sử dụng ::marker, chúng ta có thể chỉ nhắm mục tiêu hộp đánh dấu chứ không phải văn bản.

Ngoài ra, hãy lưu ý cách thuộc tính background không được phép không có tác dụng.

Kiểu danh sách
li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
Kết quả kết hợp giữa điểm đánh dấu và mục trong danh sách
Kiểu đá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;
}
Kết quả tập trung giữa điểm đánh dấu và mục danh sách


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

Sau đây là một số cách bạn có thể tạo kiểu cho điểm đánh dấu.

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: "😍";
}

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

Công cụ 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

Định kiểu phần tử giả tương lai

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

Thật tuyệt khi tiếp cận được một chủ đề nào đó thật khó tạo nên phong cách. Bạn nên tạo kiểu cho các phần tử được tạo tự động khác. Bạn có thể thất vọng với <details> hoặc chỉ báo tự động hoàn thành mục nhập tìm kiếm, những thứ không được triển khai theo cách tương tự trên các trình duyệt. Một cách để chia sẻ những gì bạn cần là tạo mong muốn tại https://webwewant.fyi.