圈子分页按钮与文本在他们下面在bootstrap

Question

我正在尝试用带圆圈的数字创建bootstrap分页，实际上通过修改css来管理其中的一半，

    .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个项目，并以px，百分比或您认为合适的任何内容为其指定width个;还设置了text-align: center;
• 我使用:before类创建了该圆圈，并将其居中，并为父a标记提供line height 50px个圆圈的高度圆圈中大约一半高度的文字
• 将p代码line height设置为1以将其重新拉回，或者您可以使用一些边距/填充等更好地定位它。
• 对于圈子背后的线条：我最好的选择是同时使用:after和＆amp;来自:before项的li，因为a标记已使用:before类
• 两条线的宽度均为50％，但未指定，我使用了left＆amp; right props。给他们一个width并添加一些margin-left/right以便它不会显示在圆圈后面（因为它最初是透明的）
• 代表first li商品，:before类doesnt show以及last li商品:after class doesnt show，自{ {1}} they werent connecting或left li items
• 将这一行定位在right li items
的大约top: 25px;，half height处
• 那就是它

检查 demo here 或查看下面的代码段：

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;
}