[分享]css分页不随数据多少变动

CSS分页作为网页中常见的分页方式，通常是通过JS动态加载数据实现的。由于数据量的不确定性，导致CSS分页的页码也随之变动，给用户体验带来一定的不便。本文将介绍一种方法，可以让CSS分页不随数据量的变...

CSS分页作为网页中常见的分页方式，通常是通过JS动态加载数据实现的。由于数据量的不确定性，导致CSS分页的页码也随之变动，给用户体验带来一定的不便。本文将介绍一种方法，可以让CSS分页不随数据量的变动而改变页码。

使用该方法，需要借助CSS3中的伪元素:before和:after。首先，在分页导航区域之前（或之后）添加一个伪元素，作为起始页码。

.pagination:before {
    content: "1";
} 

然后，在每一个页码之后添加伪元素，用于分隔页码。同时，也可以在最后一个页码之后再添加一个伪元素，用于作为结束页码。

.pagination a:not(:last-child):after {
    content: "|";
}
.pagination:after {
    content: "100";
} 

这样，无论数据量如何变化，CSS分页的页码都将显示为从1到100的连续数字序列，给用户以更好的体验。