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?

What's the absolute positioning on the pseudo element good for? — C3roe
– C3roe, Commented Oct 15, 2013 at 8:39

mavrosxristoforos · Accepted Answer · 2013-10-15 08:38:12Z

38

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

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

answered Oct 15, 2013 at 8:38

mavrosxristoforos

3,6833 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FloatingRock Over a year ago

Note: if .inner contains ANY transform, the pseudo-element will get clipped. Demo

Gabriele Petrioli · Accepted Answer · 2013-10-15 08:40:44Z

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

Collectives™ on Stack Overflow

Pseudo element :before and overflow hidden

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related