Нумерация страниц по умолчанию заменяет круги

Question

Я пытаюсь реализовать нумерацию страниц, используя класс начальной загрузки

.circle {
  position: absolute;
  left: 0;
  width: 20px;
  height: 20px;  
  border: 2px solid #777;
  border-radius: 100%;
}

.pagination>li>a, .pagination>li>span {
  border-radius: 100% !important;
  border: 0px !important;
}

.active {
  background: #777;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
<ul class="pagination">
              <li><a href="#">«</a></li>             
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
              <li><a href="#">»</a></li>
 </ul>
</div>

Я попытался удалить квадраты по умолчанию и вставить вместо них кружки. Вместо этого я попытался придать квадратам радиус границы, но он не дает форму круга и делает его овальным, который все еще существует на заднем плане.

Answer 1

Это то, что вы ищете -

ul.pagination li a {
  width: 10px;
  height: 10px;
  padding: 0;
  top: 10px;
  border-radius: 50%;
}

ul.pagination li:first-child a {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  line-height: 5px;
}

ul.pagination li:last-child a {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  line-height: 5px;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <ul class="pagination">
    <li><a href="#">«</a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a data-toggle="tab" href="#tab1"><span class="circle"></span></a></li>
    <li><a href="#">»</a></li>
  </ul>
</div>