CSS3伪：水平滚动后甚至溢出隐藏

Question

我正在开发一个负责任的页面使用引导，对于<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

删除从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; 
} 

Answer 2

删除left: -99%和right: -99%也可以帮助你。

这里是demo