Navbar bootstrap3 - 如何更改活动项目样式

【问题标题】：Navbar bootstrap3 - how to change active item styleNavbar bootstrap3 - 如何更改活动项目样式
【发布时间】：2017-05-28 22:23:35
【问题描述】：

我想更改活动项目的样式。而不是标准的灰色边框

我想添加一些这样的图像。

这种修改有什么办法吗？

【问题讨论】：

发布你的代码伙伴

标签： html css twitter-bootstrap navbar

【解决方案1】：

我不确定你的代码是什么样的，但你可以这样做

.navbar #nav > .active > a {
    color: red;
}

或根据需要定位类或 id

【讨论】：

【解决方案2】：

在活动类中添加 CSS 伪元素 ::before。

您可以调整颜色和位置。示例代码如下。

a.nav-link.active::before {
    content: "";
    height: 2px;
    width: 10px;
    background: #000;
    left: 25px;
    position: absolute;
    top: 45px;
}

【讨论】：