ページャーのデザインをcssだけで SP版

スマホ最適化ページャー

怒りのUI】ページネーションのUIを考える

左右の矢印もcssだけで実装

<div class="pager-txt">
  <span class="pager-txt-num">１ページ</span><span>（全３ページ中）</span>
</div>

<ul class="pager">
  <li class="pager-all-prev"><a href=""><span class="pager-arrow-all-left"></span></a></li>
  <li class="pager-prev"><a href=""><span class="pager-arrow-left">前のページ</span></a></li>
  <li class="pager-next"><a href=""><span class="pager-arrow-right">次のページ</span></a></li>
  <li class="pager-all-next"><a href=""><span class="pager-arrow-all-right"></span></a></li>
</ul>

.pager-txt {
  margin: 40px 0 10px;
  text-align: center;
  color: #999;
}
.pager-txt-num {
  padding-right: 5px;
}
.pager {
      width: 100%;
      display: flex;
      margin: 10px 0 30px;
}
.pager li {
      background-color: #888;
      font-weight: bold;

}
.pager li a {
      display: block;
      padding: 12px 8px;
      color: #fff;
      text-align: center;
}
.pager-all-prev,.pager-all-next {
  -webkit-box-flex: 2;
  flex-grow: 2;
}
.pager-all-prev {
  border-right: 2px solid #fff;
}
.pager-all-next {
  border-left: 2px solid #fff;
}
.pager-prev,.pager-next {
  -webkit-box-flex: 3;
  flex-grow: 3;
}
.pager-prev {
  position: relative;
}
.pager-arrow-right {
  position: relative;
  padding-right: 15px;
}

.pager-arrow-right::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -5px;
}

.pager-arrow-left {
  position: relative;
  padding-left: 15px;
}

.pager-arrow-left::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -5px;
}
.pager-prev a::after {
  content: '';
  width: 2px;
  height: 26px;
  border: 0px;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -13px;
}

.pager-arrow-all-right {
  position: relative;
  padding-right: 5px;
}

.pager-arrow-all-right::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -5px;
}
.pager-arrow-all-right::after {
  content: '';
  width: 2px;
  height: 14px;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  right: -7px;
  margin-top: -7px;
}
.pager-arrow-all-left {
  position: relative;
  padding-left: 5px;
}

.pager-arrow-all-left::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-bottom: solid 2px #fff;
  border-left: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -5px;
}
.pager-arrow-all-left::after {
  content: '';
  width: 2px;
  height: 14px;
  border-right: solid 2px #fff;
  position: absolute;
  top: 50%;
  left: -7px;
  margin-top: -7px;
}