如何将元素后面的css3定位在父元素后面？

Question

我有这个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>

但问题是蓝色方块应该完全位于红色矩形的后面，所以只有蓝色方块的右半部分突出，但即使我设置了z-index，它也会显示在顶部。

有谁知道如何修复它？

由于

Answer 1

默认情况下，伪元素被视为其关联元素的后代。
只需删除z-index:10，它就像魅力一样。

＆＃13;

＆＃13;

#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;
			}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;