Pagination

<ul class="styled-pagination">
              <li><a href="#">1</a></li>
              <li><a href="#" class="active">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#"><span class="icon fa fa-angle-right"></span></a></li>
          </ul>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        
.styled-pagination{
  position:relative;
}

.styled-pagination li{
  position:relative;
  display:inline-block;
  margin: 0 8px 0 0;
}

.styled-pagination li:last-child{
  margin-right: 0;
}

.styled-pagination li a{
  position:relative;
  display:block;
  line-height:50px;
  font-size:18px;
  height:50px;
  width:50px;
  color:#222222;
  font-weight:500;
  text-align:center;
  background:#ffffff;
  border:1px solid #dddddd;
  border-bottom: 2px solid #ec167f;
  -webkit-transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
  transition:all 500ms ease;
  text-decoration:none;
}

.styled-pagination li a:hover,
.styled-pagination li a.active{
    background-color: #ec167f;
    color: #ffffff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.10);
}
    </style>