Using pseudoelements for box-shadow, z-index behavior - css

Question

I use a :before and :after pseudoelements to create a custom-shaped shadow on my text card. I use css like this (jsFiddle):
.card {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 310px;
height: 310px;
text-align: center;
color: black;
padding-top: 35px;
border: 1px solid black;
}
.card h1 {
font-size: 15px;
font-weight: bold;
line-height: 17px;
font-style: italic;
margin: 0;
}
.card .text {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
margin: 8px auto;
padding: 15px 10px;
font-size: 13px;
text-align: left;
line-height: 14px;
height: 170px;
width: 280px;
background: white;
border-radius: 5px;
position: relative;
color: #222222;
}
.card .text:before,
.card .text:after {
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
content: "";
display: block;
position: absolute;
z-index: -1;
top: 50%;
bottom: 0;
left: 40px;
right: 40px;
border-radius: 100px/10px;
}
.card .text:after {
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
right: 10px; left: auto;
}
So far so good. Problems start, when i add some background to my .card element, for example background: #0aabff (jsFiddle #2). Notice, pseudo-elements shadow around .text disappeared.
I tried solving this by adding z-index to my .text element, but then, instead of being behind my .text element, my :before, :after are displayed before it, despite having a z-index: -1; property (jsFiddle #3).
This makes little sense to me, and i still don't know how to solve this kind of problem. Perhaps, there is some kind of workaround, or another way to get the kind of shadow i need (original idea is the courtesy of css-tricks.com);

Answer 1

You can add a z-index lower than -1 to your card class.
.card {
z-index:-2;
position:relative;
}
This is because your z-index of your pseudo-elements is lower than the default z-index value of card. By default is the background transparent and you may see the shadow. When you add a background-color then this is positioned above your pseudo-elements.
See http://jsfiddle.net/71thws1a/3/
The problem lies in the stacking of css as mentioned by #Doodlebunch