如何使用自定义字形在菜单项下划线

Question

我设法在我网站上当前选定的菜单项下添加了一个自定义字形。但是我不知道如何使字形居中...第一个是居中的，但是当我们将鼠标悬停在其他菜单项上时，它们的长度不同并且居中丢失了...纯粹是css，基于“a::after”属性。有没有人有创意？

这里是网站：www.latelierdegaia.ch 下面是CSS。提前非常感谢您！

.navigation-top a::after {
width: 60px;
content: " ";
background-image: url('images/menu-glyph-2.png');
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
left: 5%;
bottom: 0px;
height:30px;
opacity: 0;
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition: 0.3s;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
}

.navigation-top li:hover > a::after,
.navigation-top li.focus > a::after, 
.current_page_item > a::after {
opacity: 1;
}

Answer 1

在::after 伪元素的规则中，将width 更改为100%，将background-size 更改为60px auto;，并添加background-position: center top。