:after and :before are collapsing?

Question

Reference: http://www.stephenkelzer.com/design.html
Optimized for firefox only so far (may find extra bugs if viewing in other browsers

--First time poster guys, I could really use some help here, Thanks!

---

I am building a really simple portfolio page here, I plan to expand on it later.

I want to add a layered effect to each module like Chris Coyier did on his site: http://css-tricks.com/

I have made the layers green and yellow to help them stand out

HTML markup:

<div id="mh-com" class="abc portmodule">
    <div class="portmoduleimg"></div>
        <div class="portmoduleinfo">
            <h3><a href="http://www.marlonheimerl.com/" rel="nofollow">MarlonHeimerl.com</a></h3>
            <p>...</p>
        </div>
    </div>
<div id="business-template" class="zxc portmodule">
    <div class="portmoduleimg"></div>
        <div class="portmoduleinfo">
            <h3><a href="" rel="nofollow">Business Template</a></h3>
            <p>...</p>
        </div>
    </div>

CSS markup:

.portmodule {
margin-top: 25px;
height:300px;
overflow: hidden;
width:969px;
background-color:rgb(98, 109, 111);
color: rgb(192,204,206);
}
.portmodule:after, .portmodule:before {
content:"";
position: absolute;
top:6px;
left:6px;
background-color: green;
width:100%;
height:100%;
z-index: -1;
}
.portmodule:before {
top:12px;
left:12px;
background-color: yellow;
}

---

I want to make it so that each separate module has a layered effect to it. I hope you guys can help me out! Thank you!

Answer 1

http://www.codepen.io/thestevekelzer/pen/ibmta

I have found a 'minor-solution'... By that I mean that I don't consider this a preferred method.

It seems that the absolute positioning of the :before & :after pseudo-elements is all based on the parent element, not the child element like I thought. You will notice in my forked codepen that I have increased the top adjustment for the 'business-template' element to accommodate it being lower on the page.

I would still love it if someone knows a more simple solution. Thank you!!!