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

:after and :before are collapsing?

:after and :before are collapsing?

Problem

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:

MarlonHeimerl.com

...

Business Template

...

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!

Problem courtesy of: StephenKelzer

Solution

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

Solution courtesy of: StephenKelzer

Discussion

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

×