Đá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 sauol {
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 đâyCá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ớili::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