html - CSS3伪:after horizontal scroll even overflow hidden

Question

我正在使用 bootstrap 开发一个负责任的页面，对于 <div>我正在使用的内容 :before和 :after伪屏幕尺寸。下面是代码，它工作正常。但是水平滚动出现了，连溢出都隐藏了。请帮助删除水平滚动条。

CSS

.text_box{
 background:#ff0000;
 width:1000px;
 height:200px;
 margin: 0 0 19px;
 padding: 20px 0 25px;
 position: relative;
 color:#ffffff;
 }

.text_box:before{
background:#ff0000;
display:block;
width:100%;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:-99%;
z-index:-1;
content:'';
}

.text_box:after {   
background: #ff0000;
content: "";
display: block;
height: 100%;
overflow: hidden;
position: absolute;
right: -99%;
top: 0;
width: 100%;
z-index: -1;
}

HTML

<div class="text_box">
Hello World !!!    
</div>

Answer 1

从 :after 和 :next class 中移除 100% 的宽度。像下面这样更新您的 CSS。

.text_box:before{
background:#ff0000;
display:block;
height:100%;
overflow:hidden;
position:absolute;
top:0;
left:-99%;
z-index:-1;
content:'';
}

.text_box:after {   
background: #ff0000;
content: "";
display: block;
height: 100%;
overflow: hidden;
position: absolute;
right: -99%;
top: 0;
z-index: -1;
}