如何实现导航栏非首项LI的带延迟下划线过渡效果

问题描述 #

需要为导航菜单实现2s ease-in-out的下划线过渡效果，要求跳过第一个<li>元素，仅在其余<li> hover时触发。但当前下划线直接瞬间出现，无过渡延迟，尝试opacity属性也无法解决。

问题原因 #

当前代码仅在hover状态下创建:before伪元素，没有为伪元素设置初始状态。CSS过渡需要元素属性从一个可计算值变化到另一个，伪元素动态创建时不存在初始属性值，导致过渡失效。

解决方案 #

为非第一个<li>的:before伪元素设置默认初始状态，再在hover时修改属性触发过渡：

修改后的关键CSS代码 #

/* 为非第一个li设置相对定位，让伪元素基于它定位 */
.nav-list li:not(:first-child) {
    position: relative;
    margin-right: auto;
    flex-basis: auto;
    width: auto;
}

/* 伪元素默认状态：宽度0，隐藏下划线 */
.nav-list li:not(:first-child):before {
    content: '';
    display: block;
    height: 5px;
    width: 0; /* 初始宽度为0 */
    background-color: #444;
    position: absolute;
    bottom: -5px; /* 调整位置避免遮挡文字 */
    left: 0;
    transition: width 2s ease-in-out; /* 针对width属性设置过渡 */
}

/* hover时将宽度改为100%，触发过渡 */
.nav-list li:not(:first-child):hover:before {
    width: 100%;
}

/* 保留原有hover文字颜色变化 */
.nav-list li:hover {
    color: rgb(79, 149, 211);
}

完整修改说明 #

• 给目标<li>添加position: relative，确保伪元素的绝对定位基于父元素，避免布局混乱
• 伪元素默认设置width: 0隐藏下划线，同时定义过渡属性transition: width 2s ease-in-out
• hover时仅修改width属性为100%，触发平滑过渡
• 调整伪元素的bottom值，让下划线位于文字下方合适位置，不影响原有布局

内容的提问来源于stack exchange，提问作者Specthildur