Html 伪元素：隐藏之前和溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19376558/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pseudo element :before and overflow hidden
提问by Alexander Scholz
I have a element which has two borders. I achieved that by adding a pseudo element:
我有一个有两个边框的元素。我通过添加一个伪元素实现了这一点：
.inner:before {
width: 72px;
height: 28px;
content: '';
display: block;
border: 3px solid rgb(255, 0, 0);
position: absolute;
}
The element is wrapped with another div which has the property overflow: hidden.
该元素用另一个具有 属性的 div 包裹overflow: hidden。
As you can see here: http://jsfiddle.net/HKEn4/1/the .inner-element is hidden but not the pseudo element (tested with safari, firefox and chrome on OSX).
正如你在这里看到的：http: //jsfiddle.net/HKEn4/1/.inner-element 是隐藏的，但不是伪元素（在 OSX 上用 safari、firefox 和 chrome 测试）。
How can I hide the pseudo element?
如何隐藏伪元素？
回答by mavrosxristoforos
I added position: relative;in the .wrapperclass and it works!
我position: relative;在.wrapper课堂上添加了它，它有效！
See fiddle: http://jsfiddle.net/HKEn4/2/
见小提琴：http: //jsfiddle.net/HKEn4/2/
回答by Gabriele Petrioli
Either remove the position:absolutefrom the :beforepseudo-element, or add position:relativeto the container..
position:absolute从:before伪元素中删除，或添加position:relative到容器中。
