Css Z索引不适用于伪元素

我看过其他答案，但没有找到具体的例子。如果我使用：before或：after伪元素作为具有绝对位置的覆盖，是否可以更改父容器中元素的z索引以使它们位于覆盖之上。我创建了一个基本示例，如果您很难理解如何使z索引在这种情况下正确工作，那么任何帮助都将不胜感激：

结构示例如下所示：

<div class="page-banner">
<div class="container">
     <h2 class="page-title">Shop</h2>
</div>

.page-banner {
    position: relative;
    z-index: 1;
    height: 100%;
    background-image: url('http://placehold.it/1920x500'); background-size: cover;
}

.page-banner .page-title {
    z-index: 150;
}

.page-banner:after {
    position: absolute;
    left: 0;
    content:"";
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    height: 100%;
    z-index: 1;
}

---

将负z-索引设置为

：在
之后放入内部元素（
。页面标题
）


.page-banner:after {z-index: -1}