<nav id="pgnav">
<ul class="clr">
<li><a href="#" class="current">۱</a></li>
<li><a href="page=2" class="">۲</a></li>
<li><a href="page=3" class="">۳</a></li>
<li class="sep"><a href="/"> ...</a> </li>
<li><a href="page=6" class="">۶</a></li>
<li><a href="page=7" class="">۷</a></li>
<li><a href="page=8" class="">۸</a></li>
<li class="button"><a class="?page=2" href="?page=2"><span>صفحه بعدی</span><span class="icon-arrow-left"></span></a></li>
</ul>
</nav>
/* Reset Fa */
html[lang="en-US"]{
  direction:ltr;
}html{
  direction:rtl;
}
*{box-sizing:border-box;}
h3{color:red;font-weight:normal;font-size:25px;}
a,a:hover{text-decoration:none;color:inherit;}
body{diretion:rtl;font-family:iransans;margin:100px 0;text-align:center;}

/* Main style */
nav#pgnav {
    display: block;
    width: 760px;
    text-align: center;
    padding: 16px 5px;
    border-top: 1px solid #F3F3F3;
    overflow: hidden;
    margin: 10px auto;
    background-color: #fff;
    background-image: linear-gradient(to left,#f3f3f5,#fff 50%,#f3f3f5 80%);
    border: 1px solid #EFEFEF;
    border-width: 1px 0
}

nav#pgnav ul li,nav#pgnav ul {
    padding: 0;
    margin: 0
}

nav#pgnav ul li {
    list-style: none;
    display: inline-block;
    margin-left: 15px;
}

nav#pgnav ul li a {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.6;
    display: inline-block;
    padding: 2px;
}

nav#pgnav ul li a.current {
    color: #fff;
    background-color: #000;
    border-radius: 100%;
    height: 30px;
    width: 30px;
    line-height: 30px
}
nav#pgnav ul li a.current:hover{
  color:white;
}

nav#pgnav ul li a:hover {
    color: #9C27B0
}
Rerun