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

Question

.latest_pagination{
	text-align: center;
	position: relative;
}
.latest_pagination ul{
	position: relative;
	display: inline-block;
}
.latest_pagination ul::after{
	position: absolute;
	content: "";
	top: 50%;
	left: 100%;
	border: 1px solid blue;
	width:100% ;
}
.latest_pagination ul li{
	display: inline-block;
	position: relative;	
	margin-right: 6px;
}
.latest_pagination ul li a{
	color: #666;
	font-size: 24px;
	border: 1px solid #888;
	font-weight: 700;
	border-radius: 50%;
	width: 45px;
	height: 45px;
	line-height: 45px;
	display: inline-block;
	text-align: center;
}
.latest_pagination ul li:first-child a,.latest_pagination ul li:last-child a{
	font-size: 18px;
}
.latest_pagination ul li:first-child{
	margin-right: 26px;
}
.latest_pagination ul li:last-child{
	margin-left: 26px;
	margin-right: 0;
}

<div class="latest_pagination">
  <ul>
    <li><a href="#">0</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">0</a></li>
  </ul>
</div>

我想要从左到右两行延伸到整个宽度。 我希望蓝线扩展到所有设备的整页宽度。我篡改了宽度：calc（100％+固定宽度），但它不适用于所有设备。 任何帮助都非常感谢。谢谢！

Answer 1

Updated

This will work fine for you.

I have added some CSS to your Fiddle.

for width I have used vw(viewport-width)

 width: 100vw;

for 100% of the screen width

In your case use width: calc(100vw - 2px); that is width: calc(100vw - left-border+right-border);

.latest_pagination {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.latest_pagination ul {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: 0;
}

.latest_pagination ul::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  border: 1px solid blue;
  width: calc(100vw - 2px);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.latest_pagination ul li {
  display: inline-block;
  position: relative;
  margin-right: 6px;
  z-index: 9;
}

.latest_pagination ul li a {
  color: #666;
  font-size: 24px;
  border: 1px solid #888;
  font-weight: 700;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  display: inline-block;
  text-align: center;
}

.latest_pagination ul li:first-child a,
.latest_pagination ul li:last-child a {
  font-size: 18px;
}

.latest_pagination ul li:first-child {
  margin-right: 26px;
}

.latest_pagination ul li:last-child {
  margin-left: 26px;
  margin-right: 0;
}

<div class="latest_pagination">
  <ul>
    <li><a href="#">0</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">0</a></li>
  </ul>
</div>

I hope this was helpfull.

Answer 2

Your line needs to be its own object relative to the entire container for this to work (left 0, not 100%)

.latest_pagination .line {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    border: 1px solid blue;
    width:100% ;
}

and I filled your circles with background white so the line doesn't show through them:

.latest_pagination{
	text-align: center;
	position: relative;
}
.latest_pagination ul{
	position: relative;
	display: inline-block;
}
.latest_pagination .line {
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	border: 1px solid blue;
	width:100% ;
}
.latest_pagination ul li{
	display: inline-block;
	position: relative;	
	margin-right: 6px;
  background: white;
}
.latest_pagination ul li a{
	color: #666;
	font-size: 24px;
	border: 1px solid #888;
	font-weight: 700;
	border-radius: 50%;
	width: 45px;
	height: 45px;
	line-height: 45px;
	display: inline-block;
	text-align: center;
}
.latest_pagination ul li:first-child a,.latest_pagination ul li:last-child a{
	font-size: 18px;
}
.latest_pagination ul li:first-child{
	margin-right: 26px;
}
.latest_pagination ul li:last-child{
	margin-left: 26px;
	margin-right: 0;
}

<div class="latest_pagination">
<div class="line"></div>
						<ul>
							<li><a href="#">0</a></li>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">0</a></li>
						</ul>
					</div>