<h1>Pagination CSS Counter</h1>
<section>
<h2>Jump to page:</h2>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</section>
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:700);
/* counters */
body {
counter-reset: pages;
}
a {
counter-increment: pages;
}
a::before {
content: counter(pages);
}
/* the rest is just to make things pretty */
body {
margin: 32px;
font: 700 32px/1 'Droid Sans', sans-serif;
color: #fff;
background-color: #3f4b58;
}
h1 {
margin: 0 0 32px;
font-size: 48px;
}
h2 {
margin: 0 0 8px 8px;
font-size: inherit;
}
section {
margin-bottom: 16px;
padding: 16px;
border-radius: 4px;
overflow: hidden;
background-color: rgba(255, 255, 255, .1);
}
a {
float: left;
width: 32px;
margin: 8px;
padding: 8px;
border-radius: 4px;
border: solid 2px rgba(255, 255, 255, .4);
text-decoration: none;
text-align: center;
color: #fff;
background-color: rgba(255, 255, 255, .2);
transition: all .1s;
}
a:hover {
border: solid 2px #fff;
background-color: rgba(255, 255, 255, .4);
box-shadow: 0 0 10px #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.