我有一个与php中的活动类重叠的css样式

查看图片，了解更多关于我焦虑的线索

---

您需要将活动样式应用于链接，而不是父li。将最后一个CSS代码更改为：

.nav-link {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    transition: all .25s ease;
}

.nav-link:hover, .nav-link:focus {
    color: #ff9328;
    border-bottom: 1px solid #ff9328;
}

.active{
    border-bottom: 1px solid #ff9328;
}

---

请注意，这是未经测试的问题，因为该问题缺少所有相关的CSS样式来测试/复制此问题。

好，很抱歉我的英语不好。你们看，在我贴在“关于”下面的图片上，有一个只覆盖文本的边框底部，在这个例子中，在一个活动类“home”上，边框底部大于文本，我希望活动链接上的边框底部也覆盖文本OK这对我有帮助。现在一切都好了。我能再问你一个问题吗？例如，如果我设置边框底部：4px实心ff9328；想要转换选项从1px工作到4px如何启用？请接受我的答案，以便其他访问者可以轻松识别。你的第二个问题是什么？在你自己尝试和测试之后，问一个新问题很可能是一个更好的主意。好吧，我想从borderr底部过渡到4px，当我点击时link@NebojsaZlatanovic尝试类似.active.nav-link:active{border-bottom:4px-solid-ff9328；}的方法。但是，当您单击链接时，将重新加载页面，因此效果会很快消失。如果这不起作用，我会建议你打开一个新的问题，并在那里问。请接受答案。是的，点击重新加载页面可能就是我没有看到任何动画的原因。非常感谢你，伙计！

.nav-link {
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    transition: all .25s ease;
}

.nav-link:hover, .nav-link:focus {
    color: #ff9328;
    border-bottom: 1px solid #ff9328;
}

.active{
    border-bottom: 1px solid #ff9328;
}

.active .nav-link {
    border-bottom: 1px solid #ff9328;
}