html - 无法显示 :before and :after if overflow hidden

Question

我正在设计一个全屏网站，使用 javascript 设置我的部分的高度和宽度。

我想在每个部分的底部有一个对 Angular 线分隔符。

现在，这是我的问题:

为了显示对 Angular 线 div，我需要在容器上将 overflow 设置为 auto，但如果它是 auto，整个网站会向右滚动，因为对 Angular 线 div 比正文大。

我需要容器有一个 overflow:hidden，但仍然能够看到对 Angular 分隔线。

你可以在这里看到我在说什么: http://codepen.io/anon/pen/emoLpd

如果您取消注释 div.website-section 中的 //overflow:hidden，您将看到对 Angular 线不再可见。

如何 overflow hidden 并同时显示对 Angular 线 div？

在此先感谢您的帮助。

PS:对于大量代码感到抱歉，但我正在使用 less 进行开发，我粘贴了完整代码。

Answer 1

这是一个工作示例，从您的示例中 fork 出来:http://codepen.io/anon/pen/jERvrE

无需在 .website-section div 上设置 overflow:hidden。您可以简单地在 body 元素上设置 overflow-x: hidden，这样可以防止出现水平滚动条，但不会修改垂直滚动条。

这是重要的部分:

body {
    overflow-y: auto;
    overflow-x: hidden;
}