WordPress中Elementor菜单边框动画黑色初始线问题解决

原因分析 #

出现黑线的核心原因有两点：

• 初始伪元素高度设为0，悬停时突然将高度改为3px，且未对height属性添加过渡动画，浏览器渲染时会因高度突变触发短暂的默认边框样式。
• 仅对width添加了过渡，height和background-color的变化是瞬间完成的，容易出现视觉断层，导致黑色边框短暂显现。

修复后的CSS代码 #

#stickyheaders .e-n-menu-items-heading .e-n-menu-item-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 0;
    height: 3px; /* 初始就设置目标高度，避免高度突变 */
    background-color: #E2E2E2; /* 初始就设置目标颜色 */
    border: none; /* 完全重置边框属性，消除默认样式影响 */
    transition: width 0.5s ease-in-out; /* 仅过渡宽度即可 */
}

#stickyheaders .e-n-menu-items-heading .e-n-menu-item-title:hover::after {
    width: 100%; /* 悬停时仅改变宽度 */
}

额外优化说明 #

如果需要保留高度渐变效果，可修改过渡属性包含height，代码如下：

#stickyheaders .e-n-menu-items-heading .e-n-menu-item-title::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 0;
    height: 0px;
    background-color: #E2E2E2;
    border: none;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out; /* 同时过渡宽度和高度 */
}

#stickyheaders .e-n-menu-items-heading .e-n-menu-item-title:hover::after {
    width: 100%;
    height: 3px;
}

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