CSS đánh dấu Li

Đánh dấu danh sách kiểu dáng luôn là một cuộc chiến. Ngay cả kiểu dáng đơn giản như thay đổi màu của dấu đầu dòng/số hoặc làm cho chúng lớn hơn cũng cần một chút CSS

Trong những ngày đầu, CSS cung cấp cho chúng tôi rất ít cách tùy chỉnh, điều này gây khó chịu cho nhiều nhà thiết kế. Tất cả những gì chúng ta có thể làm là thay đổi

• dấu đầu dòng được điền mặc định (disc) thành hình vuông (square) hoặc hình tròn rỗng (circle)
• các số trong danh sách được sắp xếp thành chữ số La Mã hoặc chữ cái ('a', 'b', 'c'), chữ hoa hoặc chữ thường

Sau đó, chúng tôi có thể thay thế các ký tự mặc định, nhưng như mọi khi, do thiếu công cụ phù hợp, chúng tôi đã sử dụng hack để thực hiện các thiết kế đó

Cách chúng tôi đã và đang làm

Trong một thời gian dài, việc tạo kiểu cho danh sách bằng cách thay thế các dấu mặc định bằng các phần tử giả ::before tùy chỉnh là cách chúng tôi có những dấu đầu dòng và số trông lạ mắt

Trước tiên, chúng tôi sẽ loại bỏ kiểu dáng danh sách mặc định và thêm lại các dấu đầu dòng tùy chỉnh vào. Ở đây tôi chỉ sử dụng một ký tự hình tròn ASCII (_______10) làm điểm đánh dấu, nhưng bạn có thể sử dụng bất kỳ ký tự ASCII nào bạn thích

ul,
ol {
  list-style: none;
  padding-left: 0;
}

li {
  padding-left: 1.5em;
  position: relative;
}

li::before {
  content: "\25CF";
  color: green;
  position: absolute;
  left: 0;
}

Nhưng điều đó có nghĩa là danh sách theo thứ tự cũng sẽ có dấu đầu dòng, đó không phải là điều chúng tôi muốn. Dựa trên CSS trước đó, chúng tôi sẽ cung cấp cho

ol {
  counter-reset: item;
}

ol li::before {
  content: counter(item) "\002E";
  counter-increment: item;
}

1 một số bằng cách thêm phần sau

ol {
  counter-reset: item;
}

ol li::before {
  content: counter(item) "\002E";
  counter-increment: item;
}

Ghi chú.

ol {
  counter-reset: item;
}

ol li::before {
  content: counter(item) "\002E";
  counter-increment: item;
}

2 thêm dấu chấm sau số để sao chép kiểu dáng mặc định, nhưng, một lần nữa, bạn có thể thêm bất kỳ ký tự ASCII nào bạn thích tại đây

Cách chúng ta có thể làm bây giờ

Đó là rất nhiều mã khi bạn so sánh nó với cách chúng tôi có thể làm bây giờ, sử dụng phần tử giả

ol {
  counter-reset: item;
}

ol li::before {
  content: counter(item) "\002E";
  counter-increment: item;
}

0 tương đối mới

li::marker {
  color: green;
}

Dễ viết, dễ đọc và thực hiện chính xác điều tương tự;

• loại bỏ và thay thế khoảng cách mặc định
• loại bỏ và thay thế điểm đánh dấu
• bộ đếm CSS ưa thích cho danh sách theo thứ tự

Bạn có thể tạo kiểu cho điểm đánh dấu theo bất kỳ cách nào bạn muốn tạo kiểu cho văn bản thông thường, do đó, có rất nhiều điều khiển. Và, tất nhiên, bạn vẫn có quyền truy cập vào

ol {
  counter-reset: item;
}

ol li::before {
  content: counter(item) "\002E";
  counter-increment: item;
}

2, vì vậy bạn có thể biến dấu đầu dòng thành hình vuông hoặc đếm bằng chữ số La Mã

Hỗ trợ trình duyệt là tốt

Tại thời điểm viết bài, kỹ thuật mới này để tạo kiểu cho các điểm đánh dấu danh sách hoạt động rất tốt trong Firefox và Safari. Nó chưa được hỗ trợ trong Chrome, Edge hoặc Opera, nhưng tin tốt là nó có trong phiên bản tiếp theo của Chrome (phiên bản 86) và điều đó có nghĩa là hỗ trợ trong Edge và Opera sẽ không còn xa nữa, vì cả hai đều

Làm cách nào để ẩn dấu chấm Li trong CSS?

Làm cách nào để sử dụng kiểu danh sách trong CSS?

Là gì. đánh dấu trong Li?

Làm cách nào để căn chỉnh danh sách trong CSS?