Circle pagination buttons with text below them in bootstrap

Question

I am trying to create bootstrap pagination with circled numbers, actually managed half of it by modifying the css like,

    .pagination > li > a, .pagination > li > span{
    border-radius: 100px;
    width: 50px;
    height: 50px;
    margin-left: 10px;
    padding-top: 13px;
    text-align: center;
}
.pagination > li:first-child > a, .pagination > li:first-child > span,.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-radius: 100px;
}

然而,有两件事我仍然无法弄清楚.1.如何在圆项后面添加线？它们可能是3或4个项目,因此图像不起作用.2.任何人都可以指点我如何在圆圈下方添加文字,这些圆圈将始终与圆圈对齐并推动其他项目,以便项目之间有空格？

<nav>
<ul class="pagination">   
<li>
<a href="#">1<p class="pagination-text">Lorem Ipsum</p></a>
</li>
<li>
<a href="#">2<p class="pagination-text">Dolor Sit Amet</p></a>
</li>
</ul>
</nav>

提前致谢.

Answer 1

你可以通过一些:pseudo selectors方式实现这种线条风格并从中解决问题.

所以,从你的标记开始:

• float这些li物品并给出一些指定的width,以px,百分比或任何你认为合适的东西; 还设置了text-align: center;
• 我创建了一个圆圈使用:before类,它为中心,给父a标签line height的50px,圆的高度,以使在圈子中的文本在大约一半的高度
• 将p标签line height设置1为将其拉回,或者您可以使用一些边距/填充等更好地定位标签.
• 对于圆圈后面的线条:我最好的选择是使用两个:after&:before来自li项目,因为a标签已经使用了一个:before类
• 两条线的宽度都是50%,但未指定,我使用left&right props.给他们一个width并添加一些,margin-left/right以便它不会显示在圆圈后面(因为它最初是透明的)
• 对于first li项目,:before类doesnt show,以及last li项目:after class doesnt show,因为they werent connecting使用left li items或者right li items
• 在约定位这些线top: 25px;,half所述height的circle
• 这就是它

在这里查看演示或查看下面的代码片段:

*,
*:after,
*:before {
  box-sizing: border-box;
}
ul {
  margin: 0;
  padding: 0;
}
.pagination > li {
  overflow: hidden;
  position: relative;
  margin-top: 25px;
  width: 25%;
  float: left;
  list-style: none;
  padding: 0;
}
.pagination > li p {
  color: #000;
  line-height: 1;
}
.pagination > li > a {
  line-height: 50px;
  text-decoration: none;
  color: #000;
  display: block;
  text-align: center;
  position: relative;
}
/*positon the circle*/

.pagination > li > a:before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 50px;
  height: 50px;
  left: 50%;
  margin-left: -25px;
  border-radius: 100%;
  border: 1px solid blue;
  transition: all .2s;
}
/*positioning the line*/

.pagination > li:not(:last-of-type):after,
.pagination > li:not(:first-of-type):before {
  content: '';
  position: absolute;
  background: blue;
  top: 25px;
  height: 1px;
}
.pagination > li:first-of-type:after {
  left: 50%;
  right: 0;
  margin-left: 25px;
}
.pagination > li:not(:first-of-type):before {
  left: 0;
  right: 50%;
  margin-right: 25px;
}
.pagination > li:not(:first-of-type):after {
  right: 0;
  left: 50%;
  margin-left: 25px;
}
/*hover stuff*/

.pagination > li:hover a {
  color: #fff;
}
.pagination > li:hover a:before {
  background: blue;
}

<nav>
  <ul class="pagination">
    <li>
      <a href="#">
                1
                <p class="pagination-text">Lorem Ipsum</p>
            </a>
    </li>
    <li>
      <a href="#">
                2
                <p class="pagination-text">Lorem Ipsum</p>
            </a>
    </li>
    <li>
      <a href="#">
                3
                <p class="pagination-text">Lorem Ipsum</p>
            </a>
    </li>
  </ul>
</nav>