JSFiddle - React, Tailwind, and code Playground

by ojtramp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
        <nav>
          <a id="one" href="#">name</a>
          <div class="floatright">
            <a id="tt" href="#">Link One</a>
            <a href="#">Link Two</a>
            <a href="#">Link Three</a>
            <a href="#">Link Four</a>
            </div>
            
            <div class="underline-nav">
            </div>

          </nav>
        </div>

CSS

.underline-nav {
  background: red;
  height: .25rem;
  position: absolute;
  top: 1.65em;
  transition:all ease 0.3s;

}
nav{
  font-size: 1.85em;

}

nav a{
    text-decoration: none;
    color:#000;
    float:left;
    margin-top: 1vh;
}

#one{
  margin-left: 2vw;
}

.floatright{
  float:right;
  padding-right: 3vw;
}
.floatright a{
    margin-left: 4vw;
}


hr {
  height: .25rem;
  width: 9.5%;
  margin: 0;
  margin-left: 1.3vw;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
  top: 6vh;
}

a:hover ~ hr{
  margin-left: 20px;
}

JavaScript

$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));

$('nav a').hover(function(){
  
    $(".underline-nav").css("width", $(this).width());
    $(".underline-nav").css("margin-left", $(this).css("margin-left"));

    var position = $(this).position();
    $(".underline-nav").css("left", position.left);


})