Bootstrap Подчеркнутый Nav Link
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>-->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
У меня возникли проблемы с этим фрагментом кода:
.navbar-default .navbar-nav > .active > a:after {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #1B94E1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
По существу, я хочу использовать CSS ::after
pseudoclass создать подчеркивание своего рода. Однако, похоже, ничего не происходит. Обратите внимание, что я использую Bootstrap и применяю эти стили к navbar. Благодаря!
Вот codepen: http://codepen.io/Hudson_Taylor11/pen/ZBGGXQ
Что конкретно вы возникли проблемы с? Предоставление фрагмента кода будет хорошим. Помогите нам помочь вам. – seemly
Граница не отображается. Я дам фрагмент кода. Благодаря! –