伪元素：隐藏前溢出

Question

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 .

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).

How can I hide the pseudo element?

Answer 1

I added position: relative; in the .wrapper class and it works!

See fiddle: http://jsfiddle.net/HKEn4/2/

Answer 2

从:before伪元素中删除position:absolute ;或者position:relative对于容器添加position:relative