Custom CSS pagination

Mandy van Zetten

On my latest project I have been working with CSS(3) and had to make a custom pagination. To be able to make this possible I had to use some pseudo-classes to be able to manipulate the changing view of it.


So let’s make de HTML to show u how I’ve done it.

First of all I will show you a static version of my HTML with only the class pagination and some <a> elements.

<div class="pagination">

I worked with SAP so the normal styling of it wasn’t that nice.


First here in the CSS I gave them a border that goes around the top, left and bottom only to not overlap some borders.

.pagination a {
color: #007bc7;
float: left;
padding: 10px 16px;
text-decoration: none;
border-right: 1px solid #bfbfbf;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;

To complete the border I choose the first <a> of the HTML with the pseudo element :first-child,

Because all the other borders left the left border out we’re giving it to the first class to make it a square.

.pagination a:first-child {

border-left: 1px solid #bfbfbf;


It will look like this

Next we proceed to look at the squares with pagination in it to show you that your mouse is hovering over it with the pseudo-class :hover, this pseudo-class only gets used when the action is hover.

.pagination a:hover {
background-color: #346187;
color: #FFF;

We give the square a color and change the color of the text as well to make clear we are hovering over it.

at last if we have a hover  hence we also need a click, to know that this is the one we clicked on, we do this by using the pseudo-class :active in the same way we used the previous pseudo-classes.

.pagination a:active {

background-color: #000;

color: #FFF;


There are many more pseudo-classes you can use here.


you might also like