CSS-伪元素转换

Question

我正在尝试使用：after伪元素将位于每个导航项（菜单项）下方的图像居中。

我一直在尝试使用以下转换：translate（...）;方法，但是根据每个单词/菜单项的长度，图像无法正确居中。

.header-nav li.current-menu-item:after {
    content: url(/wp-content/uploads/2018/10/accent-medium.png);
    position: absolute;
    bottom: -18px;
    left: 25%;
    transform: translate(20%, -50%);
}

在这种情况下，有没有人能很好地解释转换方法的工作原理？我无法找到符合我目的的示例。

此外，一些可以解决问题的CSS代码将不胜感激！

谢谢！