Pseudo element :before and overflow hidden
04:57 15 Oct 2013

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?

html css