This page covers advanced pagination styling including hover effects, transitions, and breadcrumbs.
Pagination with Hover Effect
Use the :hover selector to change the background color of each page link when the user hovers over them:
- «
- 1
- 2
- 3
- 4
- 5
- »
Example
Formatted code
.pagination li a:hover:not(.active) {
background-color: lightgray;
}Live preview
Transition Effect on Hover
Add the transition property to the page links to create a transition effect on hover:
- «
- 1
- 2
- 3
- 4
- 5
- »
Example
Formatted code
.pagination li a {
display: block;
padding: 8px 12px;
text-decoration: none;
border: 1px solid gray;
color: black;
margin: 0 4px;
border-radius: 5px;
transition: background-color 1s;
}Live preview
Breadcrumb Pagination
Another variation of pagination is a so-called "breadcrumb":
- Home
- Pictures
- Summer 25
- Italy
Example
Formatted code
ul.breadcrumb {
padding: 8px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li a {color: green;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}Live preview