用伪类制作小三角形的位置问题

问题描述：在下拉菜单中会常常用到用伪类（：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;
}