Tương tự như <ol>, để có thể đánh số thứ tự một cách tự động cho bất kể element nào, ta có thể dùng cặp thuộc tính counter-reset và counter-increment
article {
// section là một định danh bất kỳ, giá trị khởi tạo = 0
counter-reset: section;
}
section {
// đặt cho đối tượng con, trên mỗi giá trị section nằm trong article, counter sẽ tăng lên 1
counter-increment: section;
}
section h2:before {
// giá trị counter được truyền vào cho thuộc tính content
content: counter(section) '. ';
}Nếu không thích kiểu đánh số mặc định là 1, 2, 3 ...., có thể chỉ định bằng cách
section:before {
content: counter(section, upper-roman)
}Hoạt động tốt trên IE8+
Một số áp dụng tìm trên codepen
See the Pen Custom List Style 3 by Chris Coyier (@chriscoyier) on CodePen.
See the Pen Wilto Counters by Chris Coyier (@chriscoyier) on CodePen.
See the Pen Timeline CSS with Counters by Jonathan Snook (@snookca) on CodePen.
Initializing...