How to achieve a CSS footer "curtain" effect?

I would like to be able to create a simple curtain effect using CSS, and I have found a tutorial on the web that explains how to do it.

However, I can't get it to actually do anything. I've tried to recreate the effect described in the tutorial on JSFiddle, without any success. I basically just copied over the code from one of the provided example pages, but it seems to be missing something.

Can someone show me what is missing in the JSFiddle I've created?

Apparently I also have to include the JSFiddle code here, so here it is:

HTML

<!DOCTYPE HTML>

<body>
    
    <div id="test">
        <p>test</p>
    </div>
    
    <div class="curtain">TEST TEST TEST</div>
    
</body>

CSS:

body {
    padding-bottom: 600px;
}
body:after {
    content: "";
    height: 1800px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: yellow;
    background-size: auto 280px;
    z-index: 1;
}
.curtain {
    height: 1200px;
    position: relative;
    z-index: 2;
}

Solution

Here is a simplified example of what you're looking for:

DEMO

HTML

<div class="title">SCROLL DOWN DUDE</div>
<div class="curtain"></div>

CSS

body {
    padding:0;
    margin:0;
    padding-bottom: 100px;
}
.title { 
    line-height:50px;
    color:#212121;
    text-align:center;
    position:fixed;
    top:0;
    left:0;
    line-height:150px;
    width:100%;
    z-index:3;
}
body:after {
    content: "COME FROM UNDER";
    height: 100px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    z-index: 1;
    color: #fff;
    text-align:center;
    line-height:100px;
}
.curtain {
    height: 1200px;
    position: relative;
    z-index: 2;
    background:yellow;
}

basically the bottom padding and :after get the same height.