Bootstrap Snippet li hover uinderline using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <nav class="navbar navbar-expand-sm bg-light">
          <!-- Links -->
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link 3</a>
            </li>
          </ul>
        </nav>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.navbar-nav >li >a:before {
    content: "";
    position: absolute;
    bottom: 15px;
    width: 0;
    height: 2px;
}
.navbar-nav > .active>a:before, .navbar >li:hover>a:before {
    width: 25%;
}
    .navbar-nav >li >a:before {
    background: #875298;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"li hover uinderline"
Bootstrap 4.1.1 Snippet by admanekishor

Related: See More

Questions / Comments:

"li hover uinderline" Bootstrap 4.1.1 Snippet by admanekishor

Related: See More

Questions / Comments:

"li hover uinderline"
Bootstrap 4.1.1 Snippet by admanekishor