在 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.Anyone 可以告诉我如何在圆圈下方添加始终与圆圈对齐的文本并推动其他项目，以便项目之间有 space 吗？

<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，以像素、百分比或您认为合适的任何形式；还设置了一个 text-align: center;
我使用 :before class 创建了那个圆圈，将其居中，并给父 a 标签一个 line height 的 50px，高度圆圈的高度，使圆圈中的文字位于其高度的一半左右
将 p 标签 line height 设置为 1 以将其拉回，或者您可以使用一些 margins/paddings 等更好地定位它
对于圆圈后面的线条：我最好的选择是同时使用 li 项目中的 :after 和 :before，因为 a 标签已经使用一个:beforeclass
两条线的宽度都是50%，但是没有指定，我用的是left&rightprops。给他们一个 width 并添加一些 margin-left/right 这样它就不会显示在圆圈后面（因为它最初是透明的）
对于 first li 项，:before class doesnt show，对于 last li 项，:after class doesnt show，因为 they werent connecting 与 left li items 或 right li items
将这些行定位在 top: 25px;、half 和 circle

height

仅此而已

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

*,
*: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>

在 bootstrap 中圈出下方带有文本的分页按钮

Circle pagination buttons with text below them in bootstrap

css

twitter-bootstrap