<div class="pagination">
<a href="#" class="pagination-item">«</a>
<a href="#" class="pagination-item">1</a>
<a href="#" class="pagination-item">2</a>
<a href="#" class="pagination-item">3</a>
<a href="#" class="pagination-item">4</a>
<a href="#" class="pagination-item">5</a>
<a href="#" class="pagination-item">»</a>
</div>
.pagination {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.pagination-item {
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
color: #000;
background-color: #fff;
border: 1px solid #ccc;
}
.pagination-item:hover {
color: #fff;
background-color: #4caf50;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.