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