Pseudo element :before and overflow hidden

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?

See [jQuery and pseudo-elements](http://stackoverflow.com/questions/8968992/jquery-and-pseudo-elements) — Marty McVry, Oct 15 '13 at 08:35
What's the absolute positioning on the pseudo element good for? — CBroe, Oct 15 '13 at 08:39

score 34 · Accepted Answer · answered Oct 15 '13 at 08:38

34

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

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

answered Oct 15 '13 at 08:38

mavrosxristoforos

3,573
2
25
40

1

Note: if `.inner` contains ANY `transform`, the pseudo-element will get clipped. [Demo](https://codepen.io/floatingrock/pen/dyMoRMr) – FloatingRock Aug 09 '20 at 16:56

score 4 · Answer 2 · answered Oct 15 '13 at 08:40

4

Either remove the position:absolute from the :before pseudo-element, or add position:relative to the container..

answered Oct 15 '13 at 08:40

Gabriele Petrioli

191,379
34
261
317

Pseudo element :before and overflow hidden

2 Answers2

Linked

Related