Đánh số thứ tự ul li từ css

Một số trang thiết kế cần đánh số , mà việc custom đánh số rất mấy thời gian chưa kể sau này thêm bớt dự liệu phải nhập lại những con số này, để khác phục việc đánh số trên hôm nay mình share cho anh em cách đánh số trong css theme flatsome wordpress hoàn toàn tự động bằng css nhé, Đọc hết bài chắc chắn bạn sẽ làm theo được nhé

Bạn hãy thêm dòng css vào theme đang dùng.

/* Count List - Flatsome.xyz */
.rightthicong ul li, .leftthicong ul li {
    list-style: none;
    counter-increment: h3;
    display: list-item;
    line-height: 1.5;
    padding: 7px;
}
.rightthicong ul li:before {
    display: list-item;
    content: "0" counter(h3) " ";
    color: lightsalmon;
    font-weight: bold;
    position: absolute;
    margin-left: -40px;
    border: 2px solid #fea8856e;
    border-radius: 99px;
    padding: 2px 5px;
}
.leftthicong ul li:before {
    display: list-item;
    content: "0" counter(h3) " ";
    color: lightsalmon;
    font-weight: bold;
    position: absolute;
    margin-left: 95%;
    border: 2px solid #fea8856e;
    border-radius: 99px;
    padding: 2px 5px;
}

Note : 2 class .rightthicong và .leftthicong là class đặt cho 2 bảng ( table ) chưa text nhé – để css cho nằm bên trái và bên phải , bạn có thể đặt khác nhé

Dong này content: “0” counter(h3) ” “; sẽ đếm dự liệu và chèn số 0 và trước số count được bạn nhé , bạn có thể thay đổi theo ý của bạn

Sau khi bạn chèn css thì số sẽ tự động chạy , sau này bạn thêm 1 dòng ( list bên dưới ) số thứ tự sẽ thành max + 1 nhé

Nguồn copy: flatsome.xyz