Loading lesson path
This page covers advanced pagination styling including hover effects, transitions, and breadcrumbs.
:hover selector to change the background color of each page link when the user hovers over them: «
»
Pagination with hover effect:.pagination li a:hover:not(.active) {
background-color: lightgray;
}Add the transition property to the page links to create a transition effect on hover: «
»
Add transition effect on hover:.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;
}Formula
Another variation of pagination is a so - called "breadcrumb":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";
}