偽類で小三角形を作る位置問題

質問説明:ドロップダウンメニューでは、偽クラス(:after)で小さな三角形を作成するのによく使用されます.しかし、小三角形の位置はpaddingとmarginによって制御しにくい.position:relativeを使用すると、その位置をうまく制御できます.コード:htmlコード

<div class="tab-head">    div>

cssコード

.site-accordion>li .tab-head:after{
    content: '';
    border: 5px solid #4F5160;
    border-color: #4F5160 transparent transparent transparent;
    margin-top: 20px;
    position: relative;
    top: 10px;
    left: 5px;
}