How to hide :before in overflow:hidden element

Question

Here is a jsFidle for the problem : https://jsfiddle.net/mvn0orto/

I have this HTML:

<div class="page state1"> <div class="navbar"></div> <div class="main"></div> </div>

And I have this CSS:

.page{ width:200px; height:300px; background:red; position:relative; } .navbar{ position:absolute; left:0; right:0; top:0; height:60px; background:green; } .main{ position:absolute; top:70px; left:10px; right:10px; bottom:10px; background:blue; } .main:before{ content:'.main:before'; display:block; background:pink; height:50px; width:100px; position:absolute; top:0; transition-duration: 0.3s; }

My .page can have 2 states, .state1 and .state2. And in function of the state, I'm applying a different translateY:

.state1 .main:before{ transform:translateY(0); } .state2 .main:before{ transform:translateY(-100%); }

So, in .state2, my :before pseudoelement is outside the .main div.

The problem is: the .main div is in overflow:hidden, but it doesn't hide at all my :before element...

How could I achieve that? In the jsfiddle I provided at the beginning of the question, I want my pink square to disappear when it gets out of the .main div.

Thanks for your replies! :)

Maybe I'm missing something, but your .main doesn't have overflow:hidden - adding this seems to give the results that you want — zelanix
– zelanix, Commented Oct 29, 2015 at 18:29
Actually looking at it zelanix is right. You're missing the overflow:hidden on .main — Rick Calder
– Rick Calder, Commented Oct 29, 2015 at 18:35
He is actually right, indeed... Thanks a lot... But it was, and it stills actually not working in my project, my example must be bad, I'm going to try to reproduce the problem in a better way :/ Thanks anyway! — Hammerbot
– Hammerbot, Commented Oct 29, 2015 at 18:39

zelanix · Accepted Answer · 2015-10-29 18:39:12Z

It looks to me like you don't actually have overflow:hidden; on your .main div. Adding this seems to give the result that you want.

https://jsfiddle.net/2xf5j53j/3/

DrKey · Accepted Answer · 2015-10-29 18:29:21Z

Just add z-index to .navbar like the following

$('button').click(function(){ $('.page').toggleClass('state1').toggleClass('state2'); });

.page{ width:200px; height:300px; background:red; position:relative; } .navbar{ position:absolute; left:0; right:0; top:0; height:60px; background:green; z-index: 1; } .main{ position:absolute; top:70px; left:10px; right:10px; bottom:10px; background:blue; } .main:before{ content:'.main:before'; display:block; background:pink; height:50px; width:100px; position:absolute; top:0; transition-duration: 0.3s; } .state1 .main:before{ transform:translateY(0); } .state2 .main:before{ transform:translateY(-100%); } button{ position:fixed; right:100px; top:20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="page state1"> <div class="navbar"></div> <div class="main"></div> </div> <button>Click me</button>

The problem is, the red color should be on top of the pink, because it should get out of the .main div

Oriol · Accepted Answer · 2015-10-29 18:41:26Z

See overflow (emphasis mine):

This property specifies whether content of a block container element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

Since the ::before pseudo-element is absolutely positioned, its containing block

is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'.

Therefore, if .main were statically positioned, overflow: hidden wouldn't hide the pseudo-element. However, .main is absolutely positioned too, so overflow: hidden works.

$('button').click(function(){ $('.page').toggleClass('state1').toggleClass('state2'); });

.page { width: 200px; height: 300px; background: red; position: relative; } .navbar { position: absolute; left: 0; right: 0; top: 0; height: 60px; background: green; } .main { position: absolute; top: 70px; left: 10px; right: 10px; bottom: 10px; background: blue; overflow: hidden; } .main:before { content: '.main:before'; display: block; background: pink; height: 50px; width: 100px; position: absolute; top: 0; transition-duration: 0.3s; } .state1 .main:before { transform: translateY(0); } .state2 .main:before { transform: translateY(-100%); } button { position: fixed; right: 100px; top: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="page state1"> <div class="navbar"></div> <div class="main"></div> </div> <button>Click me</button>

Collectives™ on Stack Overflow

How to hide :before in overflow:hidden element

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related