css中上一页1234下一页

在前端开发中，经常需要使用分页展示数据。而分页展示数据中最常见的就是上一页、下一页和具体页码。在CSS中，我们可以使用伪元素 ::before 和 ::after 来实现这些功能。

下面是一个简单的示例，使用CSS生成一个包含上一页和下一页的分页：

.pagination::before {
  content: "上一页";
  float: left;
}

.pagination::after {
  content: "下一页";
  float: right;
}

如上述代码所示，通过设置 content 属性为上一页和下一页的字符串，同时使用 float 属性将它们分别在左右两侧浮动，就可以得到一个简单的分页。

当然，我们也可以使用 ::before 和 ::after 伪元素来生成具体的页码：

.page-number::before {
  content: "1";
  float: left;
}

.page-number::after {
  content: "2";
  float: left;
}

.page-number.current::before,.page-number.current::after {
  content: "";
  background-color: #AAA;
  color: #FFF;
}

如上述代码所示，使用 ::before 和 ::after 伪元素分别生成页码 "1" 和 "2"。同时，通过设置 background-color 和 color 属性，我们可以将当前页码标识出来。在上述代码中， .page-number.current 表示当前页码的样式。

综上所述，使用 ::before 和 ::after 伪元素可以很方便地实现分页中的上一页、下一页和具体页码的功能。通过设置 content 属性和 float 属性，我们可以轻松地控制它们的样式和布局。