Подчеркивание активных ссылок navbar в bootstrap 4

Я обновляю веб-сайт с bootstrap 3 до 4 (бета-версия). В CSS я использовал, чтобы подчеркнуть активный навигации ссылки уже не работают. Вместо подчеркивания элемента он подчеркивает всю ширину страницы. Как я могу подчеркнуть активные элементы навигации в 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;

}

Попытка 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>