css伪类after与before响应hover动作的书写格式

用css实现了一个伪类的动画效果，鼠标移到li元素的时候，其伪类后从右至左移动一段距离，实装后效果不是特别好，写完又删除掉了，留个记录，用以备忘。

.widget-archive li{
    position: relative;
}
.widget-archive li:after{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border: 6px solid transparent;
    border-right: 6px solid #333;
    right: 0;
    transform: translateY(3px);
    opacity:0;
    transition: 0.25s all ease-in;
}
.widget-archive li:hover:after{
    opacity:1;
    right:12px;
    border-right: 6px solid #e91e63;
}