如何把伪元素定位到上方，已经实现定位在下方了、求大神

 .TabListItem .PopAnimateViewer:after{
    content:"";
    display:block;
    width:22px;
    height:22px;
    border-right:1px solid #d9d9d9;
    border-bottom:1px solid #d9d9d9;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    background:#ffffff;
    bottom:-16px;
}

我改成这样，但是没用

 .TabListItem .PopAnimateViewerTop:before{
    content:"";
    display:block;
    width:22px;
    height:22px;
    border-right:1px solid #d9d9d9;
    border-bottom:1px solid #d9d9d9;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    background:red;
    top:-16px;
}

 <style>
 .TabListItem .PopAnimateViewer:before{
    content:"";
    display:block;
    width:22px;
    height:22px;
    border-top:1px solid #d9d9d9;
    border-left:1px solid #d9d9d9;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    background:#ffffff;
}</style><br><br><br>
<div class="TabListItem">
<div class="PopAnimateViewer">PopAnimateViewer
</div>
</div>