我的分页当前页码不可见

Question

我有问题的样式分页。我有html代码：

<nav class="mo-pagination mo-pagination-numeric"><span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="#">2</a>
<a class="next page-numbers" href="#"><i class="fa fa-long-arrow-right"></i></a></nav>

null

.mo-pagination.mo-pagination-numeric .current, .mo-pagination .page-numbers.current::before {
  content: "";
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  padding: 2px;
  background: linear-gradient(115deg,rgba(215,8,102,1) 0%, rgba(95,70,150,1) 50%, rgba(44,187,238,1) );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.mo-pagination.mo-pagination-numeric .current, .mo-pagination .page-numbers.current {
  border: none !important;
}

.mo-pagination>a, .mo-pagination>span {
  border: 2px solid #41394e;
  color: #fff;
  background-color: transparent;
}

<span aria-current="page" class="page-numbers current">1</span>

null

我的分页元素有渐变边框，这是正常的，但分页数是不可见的。请帮我解决这个问题。

Answer 1

像这样的？

null

css prettyprint-override">.mo-pagination.mo-pagination-numeric .current, .mo-pagination .page-numbers.current::before {
  content: "";
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 5px;
  padding: 2px;
  background: linear-gradient(115deg,rgba(215,8,102,1) 0%, rgba(95,70,150,1) 50%, rgba(44,187,238,1) );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}

.mo-pagination.mo-pagination-numeric .current, .mo-pagination .page-numbers.current {
  border: none !important;
}

.mo-pagination>span {
  color: #fff;
}

.mo-pagination>a {
  border: none;
  color: #000;
  background-color: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<nav class="mo-pagination mo-pagination-numeric">
  <span aria-current="page" class="page-numbers current">1</span>
  <a class="page-numbers" href="#">2</a>
  <a class="next page-numbers" href="#"><i class="fa fa-long-arrow-right"></i></a>
</nav>