CSS Pagination
Pagination is a row of numbered links that lets users jump through long lists. CSS-wise it's a styled flex row.
HTML
HTML
<nav class="pagination" aria-label="Pagination"> <a href="?page=1" rel="prev">«</a> <a href="?page=1">1</a> <a href="?page=2" aria-current="page">2</a> <a href="?page=3">3</a> <span>…</span> <a href="?page=10">10</a> <a href="?page=3" rel="next">»</a> </nav>
CSS
CSS
.pagination {
display: inline-flex;
gap: 4px;
}
.pagination a,
.pagination span {
min-width: 36px;
padding: 6px 10px;
border: 1px solid #ddd;
border-radius: 4px;
color: #000;
text-decoration: none;
text-align: center;
}
.pagination a:hover { background: #f1f1f1; }
.pagination [aria-current="page"] {
background: #04AA6D; color: #fff; border-color: #04AA6D; font-weight: bold;
}
Modern alternatives
| Pattern | When to use |
|---|---|
| Classic numbered | SEO-friendly lists, search results. |
| "Load more" button | Image grids and feeds with mostly visual content. |
| Infinite scroll | Social streams. Keep a real footer accessible via keyboard. |
Tip: Use
aria-current="page" to mark the active link. It's both accessible and a clean CSS hook — no .active class needed.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Pagination</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Mark this link as the current page for accessibility.
<a href="?page=2" aria-
="page">2</a>
The ARIA attribute for "this is where you are".
Discussion
Loading…