html - 对齐 CSS 箭头

Question

JSFiddle

我确实尝试将绿色箭头对齐在a中间，但我无法做到这一点。我确实尝试了 margin-left 和 % 且始终关闭。

有人可以帮忙吗？累了。

谢谢。

Answer 1

原因是你的箭头是绝对定位的，但不是相对于 a 的。

对你的 CSS 进行以下更改，它就可以工作了

.container-menu nav ul li.active a,
.container-menu nav ul li a:hover{
    color: #8fb63a;
    text-decoration: none;
    position:relative;
}

.container-menu nav ul li.active a::after{
    border-bottom: 6px solid #8fb63a;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    content: "";
    display: inline-block;
    height: 0;
    margin-top: 34px;
    position: absolute;
    vertical-align: top;
    width: 0;
    left:50%;
}