CODEWITHSUNDEEP
htmlcss
Hammerbot
Hammerbot

Reputation: 16324

How to hide :before in overflow:hidden element

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! :)

Upvotes: 1

Views: 699

Answers (3)

Oriol
Oriol

Reputation: 287980

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>

Upvotes: 0

zelanix
zelanix

Reputation: 3562

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/

Upvotes: 1

DrKey
DrKey

Reputation: 3495

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>

Upvotes: 1

Related Questions