Pagination is somewhat similar to a navigation bar except that it has different page numbers that you can directly access. The list contains a series of page numbers (consecutive) and generally has forward and backward buttons at the end to navigate to next page. Pagination is very useful when the website containing data that is spread through multiple pages, like search engines.
As mentioned before, the simplest form of pagination contains 2 parts:
- List of page numbers: A list of numbers in consecutive order where each number is a link to the corresponding page.
- Forward and Backward Button: You can navigate to the immediate next or immediate previous page using these buttons. It is also helpful when your destination page is not present on the list.
The display property for pagination is generally set to inline-block to keep the list in a horizontal line.
Active and Hoverable Pagination
To highlight the current page you can style the corresponding page number, a bit different than other page numbers in the list. This can be done by creating a .active class and using it with the anchor tag for the current page. You can also add a hover effect that for other pages to notify the mouse pointer.
For further styling, you can make the corners rounded for the highlight and hover effect on the page numbers.
We can add a transition effect to be applied with the hover.
Adding borders to the page numbers for a neat list. To style it more, we can make the borders rounded for the first and last link or add space between the links.
We can increase or decrease the font size using the font-size property.
To align the pagination int center you can set the text-align property to center.