CSS Advanced
CSS Pagination
Pagination splits long lists across multiple pages and gives users navigation controls. This guide styles a clean pagination bar with hover and active states, plus rounded and bordered variants and breadcrumbs, all with live examples.
Building Pagination
Pagination is usually a list of links. The markup is a set of anchors; the styling turns them into evenly spaced, clickable page controls. Start by removing the default underline and giving each link comfortable padding.
.pagination a {
padding: 8px 14px;
text-decoration: none;
color: #334155;
}
.pagination a:hover { background: #e2e8f0; }
.pagination a.active { background: #4f46e5; color: #fff; }A Basic Pagination Bar
<!DOCTYPE html>
<html>
<head>
<style>
.pagination { display: inline-flex; font: 14px sans-serif; }
.pagination a {
padding: 9px 15px;
text-decoration: none;
color: #334155;
transition: background .2s;
}
.pagination a:hover { background: #e2e8f0; }
.pagination a.active { background: #4f46e5; color: #fff; }
</style>
</head>
<body>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">»</a>
</div>
</body>
</html>Rounded and Bordered Variants
Adding a gap and border-radius turns the flat bar into pill-shaped buttons. A shared border with rounded outer corners gives a more traditional bordered look.
<!DOCTYPE html>
<html>
<head>
<style>
.pagination { display: inline-flex; gap: 6px; font: 14px sans-serif; }
.pagination a {
padding: 9px 15px;
text-decoration: none;
color: #334155;
border-radius: 999px;
transition: background .2s;
}
.pagination a:hover { background: #e2e8f0; }
.pagination a.active { background: #059669; color: #fff; }
</style>
</head>
<body>
<div class="pagination">
<a href="#">‹ Prev</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">Next ›</a>
</div>
</body>
</html>| State | Selector | Typical style |
|---|---|---|
| Default | .pagination a | Neutral text, padding |
| Hover | .pagination a:hover | Light background tint |
| Active (current) | .pagination a.active | Brand background, white text |
| Disabled | .pagination a.disabled | Dimmed, no pointer events |
Breadcrumbs
Breadcrumbs are a related navigation pattern showing the user's location in a hierarchy. A separator is added with the ::before pseudo-element so it is purely presentational.
<!DOCTYPE html>
<html>
<head>
<style>
.crumbs { list-style: none; display: flex; padding: 0; font: 14px sans-serif; }
.crumbs li a { color: #4f46e5; text-decoration: none; }
.crumbs li + li::before { content: "/"; padding: 0 8px; color: #94a3b8; }
</style>
</head>
<body>
<ul class="crumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Internships</a></li>
<li>Bengaluru</li>
</ul>
</body>
</html>Mark the current page with aria-current="page" in addition to your active class so assistive technology announces the user's position.
For a disabled Prev or Next control, remove pointer-events and dim it, but ideally use a real disabled attribute on a button so keyboard users cannot activate it.
Key points
- Pagination is a row of links styled with padding and hover feedback.
- Highlight the current page with an .active class and brand colours.
- Use gap and border-radius for pill-shaped pagination.
- Breadcrumbs show hierarchy; add separators with a ::before pseudo-element.
- Add aria-current and disabled semantics for accessibility.