Zastąp klasę Bootstrap „nav-item”

Umieściłem podkreślenie na elementach nawigacyjnych na pasku nawigacji, ale chciałbym usunąć ten efekt z ikon społecznościowych. Próbowałem użyć kilku sposobów, aby pozbyć się efektu najechania na ikony, ale żaden z nich nie działa, na przykład próbowałem dodać! Ważne lub dodać dodatkową klasę dla ikon społecznościowych lub zdefiniować klasę tylko dla a -links zawierające linki do nawigacji po stronach, ale Bootstrap 4 nie pozwala mi na to.

Na przykład próbowałem dodać klasę „nav-a” do elementów, na których chciałbym uzyskać efekt najechania:

.nav-item.nav-a {
    position: relative;
}

.nav-item.nav-a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item.nav-a:hover:after {
    width: 100%;
}

CSS

.nav-item {
    position: relative;
}

.nav-slash {
    display: flex;
    align-items: center;
    font-size: 11px;
}

.nav-item:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    border-bottom: 1px solid black;
    transition: 0.4s;
}

.nav-item:hover:after {
    width: 100%;
}

HTML

<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light">
            <!-- <div class="mx-auto d-sm-flex d-block flex-sm-nowrap"> -->
            <a class="navbar-brand" target="_blank" href="https://www.facebook.com/GetMove.Official/">GET MOVE</a>
            <button
                class="navbar-toggler mr-left custom-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active nav-a">
                        <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
                    </li>
                    <span class="nav-slash"> / </span>
                    <li class="nav-item nav-a">
                        <a class="nav-link" href="#archive">Archive</a>
                    </li>
                    <span class="nav-slash"> / </span>
                    <li class="nav-item nav-a">
                        <a class="nav-link" href="#guests">Guests</a>
                    </li>
                    <span class="nav-slash"> / </span>
                    <li class="nav-item nav-a">
                        <a class="nav-link" href="#subscribe">Newsletter</a>
                    </li>
                    <span class="nav-slash"> / </span>
                    <li class="nav-item nav-a">
                        <a class="nav-link" href="mailto: hola@getmove.net">Contact</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav flex-row justify-content-center flex-nowrap">
                    <li class="nav-item">
                        <a
                            class="nav-link nav-social-icon"
                            target="_blank"
                            href="https://www.facebook.com/GetMove.Official/"
                            ><i class="fab fa-facebook-square"></i
                        ></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
                            ><i class="fab fa-instagram"></i
                        ></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"
                            ><i class="fab fa-soundcloud"></i
                        ></a>
                    </li>
                </ul>
            </div>
        </nav>

Codepen tutaj: https://codepen.io/pen/WNNPdxv