Cacher is the code snippet organizer for pro developers

<div class="pager">
    <ul>
        <li><a href="#"><img src="images/pager_prev.png" alt="#"></a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><span>…</span></li>
        <li><a href="#"><img src="images/pager_next.png" alt="#"></a></li>
    </ul>
</div>

.pager {
    overflow: hidden;
}
 
.pager ul {
    list-style: none;
    position: relative;
    left: 50%;
    float: left;
}
 
.pager ul li {
    margin: 0 3px;
    position: relative;
    left: -50%;
    float: left;
}
 
.pager ul li span,
.pager ul li a {
    display: block;
    padding: 13px 12px 11px 12px;
	width: 12px;
    height: 12px;
    line-height: 0.8;
    text-align: center;
    border-radius: 50%;
}
 
.pager ul li a {
	font-size: 1.6rem;
    background: #f2eeea;
    text-decoration: none;
}
 
.pager ul li a:hover {
    background: #4bbaf9;
    color: #FFF;
}

.pager ul li .active {
    background: #4bbaf9;
    color: #FFF;
}