我有问题的样式分页。我有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
我的分页元素有渐变边框,这是正常的,但分页数是不可见的。请帮我解决这个问题。
像这样的?
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);
}
.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>