<nav class="cp_navi">
<div class="cp_pagination">
<a class="cp_pagenum prev" href="#">prev</a>
<span aria-current="page" class="cp_pagenum current">1</span>
<a class="cp_pagenum" href="#">2</a>
<a class="cp_pagenum" href="#">3</a>
<a class="cp_pagenum" href="#">4</a>
<a class="cp_pagenum" href="#">5</a>
<a class="cp_pagenum" href="#">6</a>
<a class="cp_pagenum" href="#">7</a>
<a class="cp_pagenum" href="#">8</a>
<a class="cp_pagenum" href="#">9</a>
<a class="cp_pagenum" href="#">10</a>
<a class="cp_pagenum next" href="#">next</a>
</div>
</nav>
nav.cp_navi *, nav.cp_navi *:after, nav.cp_navi *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
nav.cp_navi a {
text-decoration: none;
}
nav.cp_navi {
margin: 2em 0;
text-align: center;
}
.cp_navi .cp_pagination {
display: inline-block;
margin-top: 2em;
padding: 0 0.5em;
}
.cp_navi .cp_pagenum {
font-size: 1em;
line-height: 50px;
display: block;
float: left;
transition: 400ms ease;
letter-spacing: 0.1em;
color: #37474F;
border-radius: 0.3em;
width: 50px;
height: 50px;
margin: auto .5em;
border: 2px solid transparent;
}
.cp_navi .cp_pagenum:hover,
.cp_navi .cp_pagenum.current {
color: #37474F;
border: 2px solid #3F51B5;
border-radius: 0.3em;
}
.cp_navi .cp_pagenum.prev,
.cp_navi .cp_pagenum.next {
color: #ffffff;
background-color: #3F51B5;
border-radius: 0.3em;
line-height: 45px;
}
.cp_navi .cp_pagenum.prev:hover,
.cp_navi .cp_pagenum.next:hover {
color: #3F51B5;
border: 2px solid transparent;
background-color: #9FA8DA;
}
@media only screen and (max-width: 960px) {
.cp_navi .cp_pagination {
margin-top: 50px;
padding: 0 10px;
}
.cp_navi .cp_pagenum {
font-size: 0.8em;
line-height: 25px;
width: 45px;
height: 25px;
margin: auto .1em;
}
.cp_navi .cp_pagenum.prev,
.cp_navi .cp_pagenum.next {
padding: 0 25px 0 5px;
line-height: 1.5em;
}
}
@media only screen and (min-width: 120px) and (max-width: 767px) {
.cp_navi .cp_pagenum {
display: none;
}
.cp_navi .cp_pagenum:nth-of-type(2) {
position: relative;
padding-right: 20px;
}
.cp_navi .cp_pagenum:nth-of-type(2)::after {
font-size: 1.2em;
position: absolute;
top: 0;
left: 25px;
content: '...';
}
.cp_navi .cp_pagenum:nth-child(-n+3),
.cp_navi .cp_pagenum:nth-last-child(-n+3) {
display: block;
}
.cp_navi .cp_pagenum:nth-last-child(-n+4) {
padding: 0 5px;
}
.cp_navi .cp_pagenum:nth-last-child(-n+4)::after {
content: none;
}
}