Css counter code mẫu

14/10/2021 07:50 492

Css counter code mẫu là dùng để đánh số thứ tự, sau đây là code mẫu

Table of Contents

1.Code html

<div class="heartcastmedia-list-number" >
    <ol start="1">
    <li>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </li>
     <li>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </li>
     <li>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </li>
     <li>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </li>
    </ol>					
</div>

<li>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

</li>

<li>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

</li>

<li>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

</li>

<li>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

</li>

</ol>

</div>

2. Code css

.heartcastmedia-list-number ol{
list-style-type: none;
counter-reset: section;
margin: 0;
    padding: 0;
}
.heartcastmedia-list-number ol li {
    position: relative;
    padding-left: 50px;
}
.heartcastmedia-list-number ol li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
    background-color: rgb(212, 147, 157) !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    text-align: center;
    color: #fff;
    font-weight: 700;
    top: 0;
    left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.heartcastmedia-list-number ol li::marker {
    content:none;
}

.heartcastmedia-list-number ol{

list-style-type: none;

counter-reset: section;

margin: 0;

padding: 0;

}

.heartcastmedia-list-number ol li {

position: relative;

padding-left: 50px;

}

.heartcastmedia-list-number ol li::before {

counter-increment: section;

content: counters(section, ".") " ";

background-color: rgb(212, 147, 157) !important;

width: 30px;

height: 30px;

border-radius: 50%;

position: absolute;

text-align: center;

color: #fff;

font-weight: 700;

top: 0;

left: 0;

display: flex;

align-items: center;

justify-content: center;

}

.heartcastmedia-list-number ol li::marker {

content:none;

}

3. Kết quả

See the Pen <a href="https://codepen.io/tung-nguyen/pen/gOxaPPw" target="_blank" rel="noopener"> css counter</a> by Tung Nguyen (<a href="https://codepen.io/tung-nguyen" target="_blank" rel="noopener">@tung-nguyen</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

5/5 (1 Đánh giá)

Các bài viết khác có thể hữu ích với bạn

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Function xử lý upload to media wordpress [ 18/07/2022 11:11 ]
Hiệu ứng hover slide image siêu đẹp [ 26/06/2022 13:47 ]
Thêm phone cho user và lấy nó ra trong network multisite wordpress [ 19/11/2021 07:14 ]
Bắt sự kiện add to cart để update giỏ hàng minicart [ 18/10/2021 13:49 ]
Cài đặt ssl cho vBulletin 4.x [ 13/10/2021 01:03 ]
Khắc phục lỗi “Briefly unavailable for scheduled maintenance. Check back in a minute” [ 12/05/2021 02:34 ]
Ứng dụng đệ quy để tạo danh mục nhiều cấp không giới hạn [ 14/10/2020 07:32 ]
Giới thiệu theme đăng tin bất động sản đẳng cấp đầy đủ tính năng [ 25/10/2017 07:57 ]
Cách tùy biến nút add to cart trong woocommerce [ 02/01/2016 06:04 ]
Thuật toán bài viết liên quan trong wordpress [ 14/06/2015 15:11 ]

Css counter code mẫu

1.Code html

2. Code css

3. Kết quả

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)