Souligner active de la barre de navigation de liens dans le bootstrap 4

Je me suis mise à niveau d'un site de bootstrap 3 à 4 (beta). Le css que j'ai utilisé pour souligner active de la barre de navigation de liens ne fonctionne plus. Au lieu de souligner l'élément, il souligne toute la largeur de la page. Comment puis-je souligner active nav éléments dans le bootstrap 4?

Souligner active de la barre de navigation de liens dans le bootstrap 4

Bootstrap 3 css

.navbar-default .navbar-nav > .active:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: " ";
    border-bottom: 5px solid #5BC0EB;
}

Tenté de Bootstrap 4 css

.navbar-light .navbar-nav .active::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: " ";
    border-bottom: 5px solid #5BC0EB;
}

HTML

<nav class="navbar fixed-top navbar-light bg-light navbar-expand-md">
    <div class="container">
        <a class="navbar-brand" href="#">My Website</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
            aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-end" id="main-nav-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active"><a class="nav-link" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#classes">Classes</a></li>
                <li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
                <li class="nav-item"><a class="nav-link" href="#events">Events</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                <li class="nav-item"><a class="nav-link" href="#offers">Offers</a></li>
            </ul>
        </div>
    </div>
</nav>
InformationsquelleAutor ChaoticNadirs | 2017-08-23
  1. 12

    Cela est arrivé à cause de votre positionnement.

    Essayer de mettre relative position de votre li et définir après a balise à l'intérieur de li qui sera absolute positionné comme ci-dessous

    .navbar-nav > li {
  float: left;
  position: relative;
}
.navbar-light .navbar-nav .active a::after {
  border-bottom: 5px solid #5bc0eb;
  bottom: -10px;
  content: " ";
  left: 0;
  position: absolute;
  right: 0;
}

    Espère que cela aide.

    InformationsquelleAutor RaJesh RiJo