Z-index doesn't working with pseudo - css

Question

I'd like to put the arrow of the box (:after) above the image, but z-index doesn't work.
I have this code in html
<div class="example clearfix">
<div class="element item-large">
<div class="item-text">
<span>march 15, 2015</span>
<h2>Chapter One</h2>
<p>Lorem ipsum dolor sit amet, <br /> consectetur adipisicing elit. Qui, aspernatur!</p>
</div>
<div class="item-image">
<img src="assets/images/box-1.jpg">
</div>
</div>
<div class="element item">
<img src="assets/images/box-2.jpg">
</div>
</div> <!-- end example -->
And this in CSS
.example{
width: 100%;
position: relative;
height: auto;
}
.example img{
width: 100%;
display: block;
max-width: 100%;
height: 100%;
max-width: 100%;
}
.example .item-large{
width: 70%;
height: 300px;
float: left;
position: relative;
}
.example .item{
width: 30%;
height: 300px;
float: left;
position: relative;
}
.example .item-image{
width: 30%;
height: 300px;
float: left;
overflow: hidden;
z-index: 10;
}
.example .item-large .item-text{
padding: 50px;
width: 70%;
height: 300px;
float: left;
overflow: hidden;
z-index: 10;
background-color: #fff;
position: relative;
}
.example .item-large .item-image-large{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
z-index: 10;
}
.item-text{
position: relative;
}
.item-text:after{
content: " ";
position: absolute;
right: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: none;
border-left: 15px solid black;
border-bottom: 15px solid transparent;
z-index: 10;
}
Can anyone tell me why z-index in not working in my case??? thanks in advance.
https://jsfiddle.net/sgmq70L4/embedded/result/