CodePen

HTML

            
              <div class="wrapper">
  
  <div class="pagination">
    <span class="current">1</span>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a> 
  </div>
  
</div>

<div class="wrapper">
  
  <div class="pagination">
    <span>1</span>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a class="current" href="#">6</a> 
    <a href="#">7</a> 
  </div>
  
</div>
            
          
!
via HTML Inspector

CSS

            
              .wrapper {
  width:960px;
  margin:25px auto;
  text-align:center;
}

.pagination a,
.pagination span {
  text-decoration:none;
  display:inline-block;
  background:lightgrey;
  padding:10px;
  margin-right:10px;
}

a.current,
span.current{
  background:lightblue;
}


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................