为什么绝对定位的伪元素在使用转换时会丢失其z-index？

小提琴：
http://jsfiddle.net/RyanWalters/jNgLL/

发生了什么？
当您单击li时,它会向左滑动而不更改任何z-index值.但是,在内容突然出现在li之上.

应该怎么办？
我希望它会隐藏在李的背后.

CSS(简化了一点,请参阅完整示例的小提琴)：

li {
    position: relative;
    transition: transform 0.2s;
}

li.active {
    transform: translateX(-100px);
}

li:after {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    content: "Yada yada";
}

为什么：内容不落后于李？