导航栏文本下划线动画失效问题求助

问题根源 #

• 绝对定位参考缺失：伪元素:after使用position: absolute，但父元素.navbar a未设置position: relative，导致伪元素会相对于整个文档（而非导航链接）定位，下划线位置完全偏离，动画无法正常显示。
• 下划线被容器裁剪：伪元素设置bottom: -10px，结合.navbar的overflow: hidden属性，下划线会被导航栏容器裁剪，无法出现在可视范围内。

修正后的CSS代码 #

.navbar {
    overflow: hidden; 
    background-color: #333; 
}
  
.navbar a {
    float: left; 
    display: block; 
    color: #dd5527; 
    text-align: center; 
    padding: 14px 20px; 
    text-decoration: none; 
    position: relative; /* 添加相对定位，让伪元素以当前链接为定位参考 */
}

.navbar a:after {
    content: "";
    position: absolute;
    background-color: #dd5527;
    height: 3px;
    width: 0;
    left: 0;
    bottom: 5px; /* 调整位置，让下划线显示在链接文本下方，避免被裁剪 */
    transition: 0.3s;
}

.navbar a:hover::after {
    width: 100%;
}

修改说明 #

1. 给.navbar a添加position: relative，确保伪元素的绝对定位锚点是导航链接本身，下划线会跟随链接位置变化。
2. 调整bottom值为5px（可根据视觉需求微调），让下划线显示在链接文本下方区域，避免被.navbar的overflow: hidden属性隐藏。

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