pseudo element below parent element in css - html

Question

Why is it that the pseudo elements are under the img inside the parent and not under the parent itself. I put a padding inside the parent element, positioned it relatively and z-indexed it 9 while the :before - absolute and z-indexed -1?
What's happening for me is that the :before is under the img element and it should be under the parent element.
HTML:
<div class="thumbnail">
<img src = "some_url" />
</div>
CSS:
.thumbnail{
height: 131px;
max-height: 131px;
width: 100%;
background: #fff;
box-shadow: 0 0 5px -2px #000;
margin-bottom: 20px;
padding: 5px;
position: relative;
z-index: 1;
}
.thumbnail:before,
.thumbnail:after{
bottom: 0px;
display: block;
content: ' ';
width: 33%;
height: 10px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.5);
background: #000;
z-index: -1;
}
.thumbnail:before{
left: 5px;
transform: rotate(-6deg);
}
.thumbnail:after{
right: 5px;
transform: rotate(6deg);
}
img{
height: 100%;
width: 100%;
box-shadow: 0 0 10px -3px #000;
}

Answer 1

Psuedo classes :before and :after do not necessary do as they say. They are entered as child content of the element that you created them on. They just come before or after any elements in that content. Some good explanations can be found by going to http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/ and going to the Before Or After What? part of the article.
<div class="thumbnail">
.thumbnail:before
<img>
<p>
.....
.thumbnail:after
</div>
jsfiddle looks fine to me