Hướng dẫn sử dụng thuộc tính counter-reset và counter-increment

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-resetcounter-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.