私はこのキャレットを意図したとおりに表示しません

Question

私はキャレットを作成しようとしていますが、このコードはOKと思われますが、キャレットは全く表示されません。

コード：

.caret { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.caret:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 12px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 5px solid white; 
 
}

<li> 
 
    <a href="#"> 
 
    <h3>Home</h3> 
 
    </a> 
 
    <span class="caret"> 
 
</li> 

この私は強く働くべきであると考えています。誰か他の理由を教えてもらえますか？

Answer 1

.caretは白で、白い背景には表示されません。だから別の色に変更してください。

h3 { 
 
    display:inline-block; 
 
} 
 
.caret { 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.caret::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    left: 12px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 5px solid black; 
 
}

<li> 
 
    <a href="#"> 
 
    <h3>Home</h3> 
 
    </a> 
 
    <span class="caret"></span> 
 
</li>

Answer 2

`` `と` <スパンクラス= "キャレットを">閉じてください。この

.caret { 
 

 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.caret::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 12px; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 5px solid #000; 
 
}

<li><a href="#"><h3>Home</h3></a><span class="caret"></li>