Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

:after and :before are collapsing?

:after and :before are collapsing?


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:

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

HTML markup:


Business Template


CSS markup:

.portmodule {
margin-top: 25px;
overflow: hidden;
background-color:rgb(98, 109, 111);
color: rgb(192,204,206);
.portmodule:after, .portmodule:before {
position: absolute;
background-color: green;
z-index: -1;
.portmodule:before {
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!

Problem courtesy of: StephenKelzer


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

Solution courtesy of: StephenKelzer


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

:after and :before are collapsing?


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription