<div class="pagination">
<a href="#0">Previous</a>
<input type="number" value="1"> of 20
<a href="#0">Next</a>
</div>
body {
padding: 50px;
}
.pagination {
display: inline-block;
background: lighten(black, 90%);
padding: 25px;
border-radius: 5px;
mix-blend-mode: multiply;
}
input {
width: 3em;
}
a {
&:nth-of-type(1) {
margin-right: 50px;
&:before {
content: "\2190 ";
}
}
&:nth-of-type(2) {
margin-left: 50px;
&:after {
content: " \2192";
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.