Bootstrap 5导航栏hover状态下after伪元素下划线不显示问题

问题原因分析 #

你的代码存在三个核心问题导致伪元素下划线无法正常显示：

• 伪元素样式错误：给a::after设置color: red无效，伪元素是空内容，color仅控制文字颜色，要显示下划线需设置background-color: red或border-bottom。
• 过渡逻辑失效：初始与hover状态的width均为100%，无状态变化，自然看不到过渡效果，应将初始宽度设为0，hover时切换为100%。
• 选择器范围过大：全局a::after会影响所有链接（包括顶部品牌logo），需用精准选择器仅作用于导航链接。

修正后的CSS代码 #

* {
    margin: 0;
    padding: 0;
    font-family: 'Reem Kufi Fun', sans-serif;
}

section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background.jpg);
    min-height: 100vh;
    width: 100%;
    background-size: cover;
    position: relative;
    background-position: center;
}

#navbar {
    background-color: transparent !important;
    padding: 2% 6%;
}

a {
    color: white !important;
}

#fsta {
    font-size: 2em;
}

/* 仅针对导航链接设置伪元素，避免影响logo */
.nav-link {
    position: relative; /* 让伪元素相对链接定位 */
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: red; /* 用背景色实现下划线 */
    width: 0; /* 初始宽度为0，隐藏下划线 */
    transition: width 0.3s ease; /* 优化过渡流畅度 */
}

.nav-link:hover::after {
    width: 100%; /* hover时展开下划线 */
}

额外优化说明 #

• 移除了冗余的!important，用.nav-link精准控制导航链接，避免样式污染。
• 给.nav-link添加position: relative，让伪元素相对于链接底部定位，位置更准确。
• 将过渡时长调整为0.3s，更符合常规交互体验。

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