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

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 .

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

How to underline the menu items with a custom glyph

css

menu

center

glyph