Html css伪元素扩展到所有屏幕大小的整个页面宽度

。最新分页{
文本对齐：居中；
位置：相对位置；
}
.最新页码ul{
位置：相对位置；
显示：内联块；
}
.最新分页ul:：之后{
位置：绝对位置；
内容：“；
最高：50%；
左：100%；
边框：1px纯蓝色；
宽度：100%；
}
.最新页码ul li{
显示：内联块；
位置：相对位置；
右边距：6px；
}
.最新页码ul li a{
颜色：#666；
字体大小：24px；
边框：1px实心#888；
字号：700；
边界半径：50%；
宽度：45px；
高度：45px；
线高：45px；
显示：内联块；
文本对齐：居中；
}
.最新页码ul li:第一个孩子a.最新页码ul li:最后一个孩子a{
字号：18px；
}
.最新页码ul li：第一个孩子{
右边距：26px；
}
.最新页码ul li:最后一个孩子{
左边距：26px；
右边距：0；
}

您的行需要是相对于整个容器的自己的对象，才能工作（左0，而不是100%）

我用白色背景填充了你的圆圈，这样线条就不会穿过它们了：

。最新分页{
文本对齐：居中；
位置：相对位置；
}
.最新页码ul{
位置：相对位置；
显示：内联块；
}
.最新分页.行{
位置：绝对位置；
内容：“；
最高：50%；
左：0；
边框：1px纯蓝色；
宽度：100%；
}
.最新页码ul li{
显示：内联块；
位置：相对位置；
右边距：6px；
背景：白色；
}
.最新页码ul li a{
颜色：#666；
字体大小：24px；
边框：1px实心#888；
字号：700；
边界半径：50%；
宽度：45px；
高度：45px；
线高：45px；
显示：内联块；
文本对齐：居中；
}
.最新页码ul li:第一个孩子a.最新页码ul li:最后一个孩子a{
字号：18px；
}
.最新页码ul li：第一个孩子{
右边距：26px；
}
.最新页码ul li:最后一个孩子{
左边距：26px；
右边距：0；
}

已更新

这对您很有用。

我在你的小提琴上加了一些CSS

对于宽度，我使用了

vw

（视口宽度）

对于100%的屏幕宽度

在您的情况下，使用

width:calc（100vw-2px）即
宽度：计算（100vw-左边框+右边框）


。最新分页{
文本对齐：居中；
位置：相对位置；
溢出：隐藏；
}
.最新页码ul{
位置：相对位置；
显示：内联块；
背景：#fff；
填充：0；
}
.最新分页ul:：之后{
位置：绝对位置；
内容：“；
最高：50%；
左：50%；
边框：1px纯蓝色；
宽度：计算（100vw-2px）；
转换：翻译（-50%，-50%）；
z指数：-1；
}
.最新页码ul li{
显示：内联块；
位置：相对位置；
右边距：6px；
z指数：9；
}
.最新页码ul li a{
颜色：#666；
字体大小：24px；
边框：1px实心#888；
字号：700；
边界半径：50%；
宽度：45px；
高度：45px；
线高：45px；
显示：内联块；
文本对齐：居中；
}
.最新页码ul li：第一个孩子a，
.最新页码ul li：最后一个孩子a{
字号：18px；
}
.最新页码ul li：第一个孩子{
右边距：26px；
}
.最新页码ul li:最后一个孩子{
左边距：26px；
右边距：0；
}









你能提供一个定义你想要的输出的图像吗？当然可以。我添加了一张图片。点击这篇文章顶部的“在这里输入图像描述”链接…或者你可以运行代码片段。谢谢！我已经写了一个答案，请检查一下这个作品，但是我得到了一个卷轴。当我使用100%时，卷轴消失了，而不是100vw。非常感谢@因为我已经更新了我的答案，请检查一下。现在没有卷轴了。对我来说，卷轴还在那里。当我扣除大约18px而不是2px@kas你检查过我的小提琴了吗。？这里没有卷轴。很抱歉回复太晚。是的，我确实检查了你的小提琴。我确实在js小提琴上得到了一个卷轴，但当我在我的html页面中使用它时，它工作了！除了我不想在数字列表中出现这一行。所以当我添加背景时，它会非常有效。非常感谢。谢谢你的帮助，太棒了！立即调整代码以适应您的情况。：）
.latest_pagination .line {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    border: 1px solid blue;
    width:100% ;
}

 width: 100vw;