jquery - Bootstrap3 带下划线的导航链接样式

Question

我希望将 Bootstrap 菜单的样式设置为 Youtube 中带有下划线的样式。

到目前为止我已经完成了下面的代码但没有达到效果，border bottom 不适用于 a:active。

我在 bootstrap css 之后添加了我的 css，所以不可能覆盖但仍然无法正常工作。

样式 CSS

 a {
    color: black;
}


.navbar-nav>li>a:hover ,
.navbar-nav>li>a:active {
    border-bottom: 2px solid #ad1f2d!important;
}

HTML 代码

  <div class="navbar" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @*<a class="navbar-brand" href="#"><img src="../../img/logo.jpg" alt="77 Markets" height="100" width="100" style="margin-left: -10px; margin-right: 20px"></a>*@
            </div>
            <div class="navbar-collapse navbar-right collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>                       
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>

Answer 1

你是说

ul li:hover:after{
   border-bottom: 2px solid red;
   bottom: 0;
   content: "";
   left: 0;
   position: absolute;
  width: 100px;
}

http://jsfiddle.net/kisspa/DZUPF/2/