导航栏hover时::after线条不显示问题求助

核心问题排查 #

1. CSS类名拼写错误：你的CSS代码中使用了.nav-liks，但HTML里对应的类名是.nav-links，这直接导致伪元素样式完全不生效。
2. 初始宽度与定位逻辑错误：要实现从中心展开的动画，初始宽度需设为0，同时要通过定位让线条从元素中心开始变化。

修正后的完整CSS代码 #

替换原CSS中错误的.nav-liks相关代码，使用以下内容：

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    position: sticky;
}

nav img {
    width: 150px;
}

.nav-links {
    flex: 1;
    text-align: right;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative; /* 伪元素定位的基准 */
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

/* 修正类名+调整初始状态 */
.nav-links ul li::after {
    content: '';
    width: 0; /* 初始隐藏线条 */
    height: 2px;
    background: #a85d58;
    display: block;
    transition: width 0.5s ease; /* 仅针对宽度添加过渡动画 */
    position: absolute;
    left: 50%;
    bottom: 0; /* 贴在导航项底部 */
    transform: translateX(-50%); /* 让线条从中心开始 */
}

.nav-links ul li:hover::after {
    width: 100%; /* 悬停时展开到全宽 */
}

关键优化点说明 #

• 类名统一为.nav-links，确保样式能正确匹配HTML元素
• 初始宽度设为0，配合left:50%和transform: translateX(-50%)实现中心起始的展开效果
• 过渡动画仅作用于width属性，保证动画流畅性
• 利用position: absolute和bottom:0将线条固定在导航项底部

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