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;
}

Answer 2

删除left: -99%和right: -99%也可以为您提供帮助。

以下是demo

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

2 个答案: