如何修改WordPress CloudPress主题导航栏活跃页面名称下划线样式

问题根源 #

你的代码存在3个核心错误导致下划线无法正常显示：

• 绝对定位的伪元素::after的父级选择器.nav-link未设置position: relative，导致伪元素定位基准错误，脱离了导航项的显示范围
• 伪元素设置width: auto，空内容的块级元素auto宽度默认是0，自然无法显示出下划线
• 未设置伪元素的偏移属性（left、bottom等），无法控制下划线的具体显示位置

修复后代码 #

直接替换你原来的@media块内的全部代码即可：

@media (min-width: 992px) {
    .navbar5 .nav .nav-item .nav-link {
        margin: 0.5rem 0;
        position: relative; /* 新增：作为子伪元素的定位基准 */
    }
    .navbar5.navbar {padding-bottom: 0;padding-top: 0;}
    .navbar5 .header-module {padding: 10px 15px; float: right;}
    .navbar5.navbar .nav .nav-item.active .nav-link:after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%; /* 修改：下划线宽度和导航文字宽度保持一致 */
        left: 0; /* 新增：下划线和导航文字左对齐 */
        bottom: -4px; /* 新增：控制下划线在文字下方的距离，可自行调整数值 */
        background-color: #ffffff;
        display: block;
    }
}

生效注意事项 #

• 修改后如果没看到效果，先清空WordPress站点缓存、浏览器缓存后再刷新查看
• 如果想要下划线比文字短且居中，可以把width: 100%改成你需要的固定宽度，再新增left: 50%; transform: translateX(-50%);即可实现居中效果

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