导航栏激活态下划线效果的CSS实现

一、鼠标移入效果图如下：

二、div结构

<div class="navbar">
    <ul>
        <li>首页</li>
    </ul>
</div>    

css如下：

.navbar {
    color: #ACB0BB;
    font-weight: 400;
    cursor: pointer;
}

.navbar ul {
    display: flex;
}

.navbar ul>li {
    margin: 0 44px;
    position: relative;  /*注意此处相对定位*/
}

.navbar ul>li:hover::after {
    content: "";
    position: absolute;   /*注意此处绝对定位*/
    left: 2%;
    bottom: -5px;
    /* 调整下划线高度 */
    width: 96%;
    height: 2px;
    /* 调整下划线宽度 */
    background-color: #FFFFFF;
    /* 设置下划线颜色 */
}