Underlining the first 5 elements in css - html

Question

I am beginner webdeveloper. I use my project in Bootstrap 4.
I have menu with underline animation. It's work fine.
I have this code (menu and css):
.navbar-light .navbar-nav .nav-link {
color: #ffffff;
font-size: 1rem;
font-family: "Now Medium";
margin-top: 7px;
}
#media (min-width: 994px) {
.navbar-light .navbar-nav .nav-link {
color: #ffffff;
font-size: 1rem;
font-family: "Now Medium";
margin-top: 7px;
display: inline;
position: relative;
overflow: hidden;
}
.navbar-light .navbar-nav .nav-link:after {
content: "";
position: absolute;
z-index: -1;
right: 0;
width: 0;
bottom: -5px;
background: #0ad3f1;
height: 2px;
transition-property: width;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.navbar-light .navbar-nav .nav-link:hover:after,
.navbar-light .navbar-nav .nav-link:focus:after,
.navbar-light .navbar-nav .nav-link:active:after {
left: 0;
right: auto;
width: 100%;
}
}
<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100 pt-lg-0">
<a class="navbar-brand" href="/">
<img src="images/logo.svg" class="brand-logo pb-2 pt-3 pt-md-0" title="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav">
<li class="nav-item d-block d-lg-none d-xl-block text-center">
<a class="nav-link active" href="#">Start</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">5</a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">4</a>
</li>
<li class="nav-item text-center">
<a class="nav-link nav-link-selected" href="#">3 </a>
</li>
<li class="nav-item text-center">
<a class="nav-link" href="#">2</a>
</li>
<li class="nav-item mx-xl-4 mb-2 mb-md-0 text-center">
<a class="nav-link order-visit" href="#">1</a>
</li>
<li class="nav-item text-center text-lg-right">
123
</li>
<li class="nav-item text-center d-inline-block d-lg-none language-box2">
abc
</li>
</ul>
</div>
</nav>
It's work fine, but I want underline animation for only first 4 elements in this menu.
I would like the current functionality to remain the same, but only for the first 4 items of my menu
How can I make it?
Please help me.

Answer 1

You haven't specified which selectors you want to emphasize, but I'm guessing it's navbar-nav li. I'll write you the rules for how to style the first 4 elements of many:
.navbar-nav li:nth-child(1),
.navbar-nav li:nth-child(2),
.navbar-nav li:nth-child(3),
.navbar-nav li:nth-child(4) {
/*here you specify the styles you need for underlining*/
}