css翻页后页码还在

在网页中，翻页功能是非常常见的，而实现翻页功能的同时，保证页码的显示也是非常重要的。以前，很多网页实现翻页功能时会出现页码消失的情况，而现在使用CSS可以轻松解决这个问题。

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.pagination a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  border: 1px solid #999;
  margin: 0 5px;
  border-radius: 5px;
}
.pagination a.current {
  background-color: #999;
  color: #fff;
}
 

以上的代码是一个简单的翻页样式，其中使用了Flex属性将页码居中显示。其中，使用了a标签来作为页码的显示，通过为当前页码添加current类，样式可以区分当前页码和非当前页码。

同时，还可以使用伪元素before和after来实现页码前后的省略号。代码如下：

.pagination a:not(.current):first-of-type:before {
  content: "<<";
  margin-right: 5px;
}
.pagination a:not(.current):last-of-type:after {
  content: ">>";
  margin-left: 5px;
}
.pagination a:not(.current):not(:first-of-type):not(:last-of-type):before,
.pagination a:not(.current):not(:first-of-type):not(:last-of-type):after {
  content: "...";
  margin: 0 5px;
}
 

以上的代码中，使用了:not()伪类来排除当前页码和第一页、最后一页，然后通过:before和:after来添加省略号内容。同时，在第一页之前和最后一页之后的省略号需要加上margin，让它们与页码之间有一定的距离。最后，中间省略号的位置由于已经有页码，所以不需要添加margin。

总的来说，通过使用CSS实现翻页功能，不仅可以很好地显示页码，同时还可以实现漂亮的翻页效果，提高网页的用户体验。