擬似要素の適切な積み重ねを設定しました

Question

私はCSSで矢印を作成しようとしています。私は親要素の下に擬似要素を置くことに問題があります。私は何が間違っているのか分からない、私はz-indexが適切に設定されていると思う。

.down-arrow { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 2px; 
 
    height: 50px; 
 
    background-color: #fbc52b; 
 
    z-index: 100; 
 
} 
 

 
.down-arrow::before, 
 
.down-arrow::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    width: 8px; 
 
    height: 8px; 
 
    bottom: 0; 
 
    left: -3px; 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    z-index: 5; 
 
} 
 

 
.down-arrow::before { 
 
    bottom: -3px; 
 
    background-color: #fbc52b; 
 
} 
 
.down-arrow::after { 
 
    background-color: #f9f9f9; 
 
}

<span class="down-arrow"></span>

Answer 1

`position`プロパティを追加し、この

.down-arrow { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 2px; 
 
    height: 50px; 
 
    background-color: #fbc52b; 
 
} 
 

 
.down-arrow::before, 
 
.down-arrow::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute 
 
} 
 

 
.down-arrow::before { 
 
    background-color: #fbc52b; 
 
    width: 9px; 
 
    height: 2px; 
 
    bottom: 1px; 
 
    transform: rotate(45deg); 
 
    left: -7px; 
 
} 
 
.down-arrow::after { 
 
    background-color: #fbc52b; 
 
    width: 9px; 
 
    height: 2px; 
 
    bottom: 1px; 
 
    transform: rotate(-45deg); 
 
}

<span class="down-arrow"></span>