Z-index of the pseudo-element of the parent element, of the child element and the child itself

Question

How to make the z-index of the pseudo-element of the parent element higher than z-index of the pseudo-element of the child element, but the child itself has the highest z-index?

I want the red stripe to cover the gray rectangle but not cover the title itself.

Here is a fiddle

 .wrapper {
     position: relative;
      background: #000;
      overflow: hidden;
    }
    .wrapper::after {
      content: "";
        position: absolute;
        width: 650px;
        height: 1500px;
        background: rgb(244,116,31);
    background: -moz-linear-gradient(top,  rgba(244,116,31,1) 0%, rgba(218,14,6,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    background: linear-gradient(to bottom,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4741f', endColorstr='#da0e06',GradientType=0 );
        transform: rotate(40deg);
        opacity: .6;
        right: 100px;
        top: -200px;
        z-index: 10;
    
    }
    .text-block {
        position: relative;
        z-index: 10;
        width: 70%;
        margin: 0 auto;
        padding: 50px;
    }
    .text-block::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: #2b2525;
         z-index: -1;
    }
    h1 {
       position: relative;
        color: #fff;
        z-index: 12;
    }

<div class="wrapper">
        <div class="text-block">
            <h1>Text with the biggest z-index and not covered by red stripe</h1>
        </div>
    </div>

   

Answer 1

I removed the z-index everywhere and added it to the h1 like this:

.wrapper {
 position: relative;
  background: #000;
  overflow: hidden;
}

.wrapper::after {
  content: "";
    position: absolute;
    width: 650px;
    height: 1500px;
    background: rgb(244,116,31);
    background: -moz-linear-gradient(top,  rgba(244,116,31,1) 0%, rgba(218,14,6,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    background: linear-gradient(to bottom,  rgba(244,116,31,1) 0%,rgba(218,14,6,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4741f', endColorstr='#da0e06',GradientType=0 );
    transform: rotate(40deg);
    opacity: .6;
    right: 100px;
    top: -200px;

}

.text-block {
    position: relative;
    width: 70%;
    margin: 0 auto;
    padding: 50px;
}

.text-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #2b2525;
}

h1 {
   position: relative;
    color: #fff;
    z-index: 1;
}

fiddle