September 27, 2021

Pagination

<div class="pagination">
                               <ul>
                                   <li><a class="prev-next prev" href="#"><i class="ion-ios-arrow-left"></i> Prev</a></li>
                                   <li><a class="active" href="#">1</a></li>
                                   <li><a href="#">2</a></li>
                                   <li><a href="#">3</a></li>
                                   <li><a href="#">...</a></li>
                                   <li><a href="#">10</a></li>
                                   <li><a class="prev-next next" href="#">Next<i class="ion-ios-arrow-right"></i> </a></li>
                               </ul>
                           </div>

 

 <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Poppins', sans-serif; }
        .pagination li {
    display: inline-block;
    list-style: outside none none;
    margin: 0 8px 0 0;
}
.pagination-total-pages {
    display: flex;
    justify-content: space-between;
}
.pagination li a {
    background-color: #f1f1f1;
    border-radius: 3px;
    color: #242424;
    display: inline-block;
    line-height: 1;
    padding: 11px 13px;
    font-weight: 500; text-decoration: none;
}
.pagination li a:hover,
.pagination li a.active,
.pagination li a.next:hover {
    background-color: #e54c2a;
    color: #fff;
}
.pagination li a.prev-next {
    padding: 11px 22px;
}
.pagination li a.prev i {
    margin-right: 7px;
}
.pagination li a.next i {
    margin-left: 10px;
}
.pagination li a.next {
    background-color: #242424;
    color: #fff;
}
.pagination-total-pages {
    border: 1px solid #e9e9e9;
    padding: 15px 24px 13px;
}
.total-pages > p {
    margin: 4px 0 0;
}
    </style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *