如何将css3放置在元素后面的父级后面？

Question

I have this css3

  #chevrons > .chevrons-item { display:inline-block; text-decoration:none; color:black; padding:5px; font-size:18px; position:relative; margin-right:20px; border:1px solid gray; background-color:red; position:relative; z-index:10; } #chevrons > .chevrons-item:after { content:''; width: 21px; height: 21px; transform: rotate(45deg); border:1px solid gray; position:absolute; background-color:blue; top:4px; right:-12px; z-index:-1; } 

  <div id="chevrons"> <a href="/" class="chevrons-item">sdfsdf</a> <a href="/" class="chevrons-item">Bsdfsdf</a> <a href="/" class="chevrons-item">Csdfsdf</a> </div> 

But the problem is the blue square should be completely behind the red rectangle, so only the right half of the blue square sticks out, but it appears on top even though I set the z-index.

Does anyone know how to fix it?

Thanks

Answer 1

By default Pseudo-elements are treated as descendants of their associated element.
Just remove the z-index:10 and it will work like a charm.

 #chevrons > .chevrons-item { display:inline-block; text-decoration:none; color:black; padding:5px; font-size:18px; position:relative; margin-right:20px; border:1px solid gray; background-color:red; position:relative; } #chevrons > .chevrons-item:after { content:''; width: 21px; height: 21px; transform: rotate(45deg); border:1px solid gray; position:absolute; background-color:blue; top:4px; right:-12px; z-index:-1; } 

 <div id="chevrons"> <a href="/" class="chevrons-item">sdfsdf</a> <a href="/" class="chevrons-item">Bsdfsdf</a> <a href="/" class="chevrons-item">Csdfsdf</a> </div>