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

我正在使用bootstrap开发一个负责任的页面，我正在使用：before和：after pseudo作为屏幕大小的内容。下面是代码，工作正常。但是水平卷轴出现了，甚至溢出的部分也被隐藏了。请帮助删除水平滚动条

CSS

HTML

---

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

删除左侧：-99%和右侧：-99%也可以帮助您

---

这是一个

如果你提到你想要实现什么，我会更好。

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

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