z-index问题之前和之后的CSS伪

Question

我想在创建“功能区”之前和之后有一个奇怪的CSS伪问题 - 出于某种原因他们只是不会关注z-index！

.posts-list .post .title {
  position: relative;
  color: #fff;
  padding: 5px 15px;
  width: 100%;
  margin-left: -15px;
  background: #698800;
  z-index: 1;
}
.posts-list .post .title:before {
  content: "";
  position: absolute;
  border-color: transparent #7d90a3 transparent transparent;
  border-style: solid;
  border-width: 15px;
  height: 0;
  left: -15px;
  bottom: -15px;
  width: 0;
  z-index: -1;
}
.posts-list .post .title:after {
  content: "";
  position: absolute;
  border-color: transparent transparent transparent #7d90a3;
  border-style: solid;
  border-width: 15px;
  height: 0;
  right: -15px;
  bottom: -15px;
  width: 0;
  z-index: -1;
}

这是小提琴：http://jsfiddle.net/182999yj/