title: Bootstrap 4 nav-link hover effect
body: <p>I'm trying to put a hover effect targeting the a-links in the navigation bar only (not the forwardslashes).
  But I can't seem to access only the a-links, the effect ends up running along the whole navbar instead.
  Seems to be a conflict with Bootstrap 4 here.</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;nav class="navbar sticky-top navbar-expand-md navbar-light bg-light"&gt;
              &lt;!-- &lt;div class="mx-auto d-sm-flex d-block flex-sm-nowrap"&gt; --&gt;
              &lt;a class="navbar-brand" href="https://www.facebook.com/GetMove.Official/"&gt;GET MOVE&lt;/a&gt;
              &lt;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"
              &gt;
                  &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
                  &lt;ul class="navbar-nav ml-auto"&gt;
                      &lt;li class="nav-item active"&gt;
                          &lt;a class="nav-link" href="#"&gt;Home&lt;span&gt; / &lt;/span&gt;&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#past-bookings"&gt;Archive&lt;span&gt; / &lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;About&lt;span&gt; / &lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#subscribe"&gt;Newsletter&lt;span&gt; / &lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="mailto: hola@getmove.net"&gt;Contact&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="nav navbar-nav flex-row justify-content-center flex-nowrap"&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a
                              class="nav-link nav-social-icon"
                              target="_blank"
                              href="https://www.facebook.com/GetMove.Official/"
                              &gt;&lt;i class="fab fa-facebook-square"&gt;&lt;/i
                          &gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link nav-social-icon" target="_blank" href="https://www.instagram.com/getmovemx/"
                              &gt;&lt;i class="fab fa-instagram"&gt;&lt;/i
                          &gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link nav-social-icon" target="_blank" href="https://soundcloud.com/getmove"
                              &gt;&lt;i class="fab fa-soundcloud"&gt;&lt;/i
                          &gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>Fiddle here
  <a href="https://codepen.io/pen/WNNPdxv" rel="nofollow noreferrer">https://codepen.io/pen/WNNPdxv</a></p>