CSS导航栏滑块突出显示动画？

Question

我正在尝试创建一个带有下划线的顶部导航栏，该下划线在悬停时在每个链接/按钮下方滑动。我猜转换或关键帧会起作用，但我似乎无法让它起作用。

这是我最好的镜头，但我只能让父导航或 div 成为触发器，而不是实际的链接本身，而且我无法让栏滑动到相对于链接的位置（现在它只是向右平移 500px）。

任何帮助将不胜感激！

#header {
	position: fixed;
	background-color: rgba(255, 255, 255, 0.7);
	width: 100%;
	top: 0px;
	left: 0px;
  z-index: 1;
  text-align: center;
  padding: 15px;
}

.nav ul li {
  font-family: 'Exo', sans-serif;
  text-transform: uppercase;
  list-style-type: none;
  display: inline;
  padding: 11px;
}

.slider {
	position: absolute;
	bottom: 0px;
	left: -50px;
	width: 50px;
	height: 5px;
	background-color: rgba(52, 152, 219, 0.3);
	transition-property: transform;
	transition-duration: 300ms;
	transition-timing-function: ease-in-out;
	transition-delay: 0s;
}

.nav:hover .slider {
	  transform: translate(500px);
}

.nav ul li a {
  text-decoration: none;
  margin: 0px 30px 0px 30px;
  color: rgba(0, 0, 0, 0.5);

<header id="header">
    			<nav class="nav">
    				<ul class="list">
              <div class="slider"></div>
    					<li class="btn"><a href="#home">Home</a></li>
    					<li class="btn"><a href="#about">About</a></li>
    					<li class="btn"><a href="#portfolio">Portfolio</a></li>
    					<li class="btn"><a href="#contact">Contact</a></li>
    				</ul>
    			</nav>
  	    </header>

Answer 1

你可能会去这样的事情吗？

$('li').on('click', function() {
  $('.current').removeClass('current');
  $(this).addClass('current');
}).has("a[href*='" + location.pathname + "']").addClass("current");

  .nav {
    width: 50%;
    margin: 0 auto;
    font-family: 'Exo', sans-serif;
    text-transform: uppercase;
    list-style-type: none;
    display: inline;
    padding: 11px;
  }

ul li {
    display: inline;
    text-align: center;
  }

  a {
  display: inline-block;
  width: 25%;
  margin: 0;
  text-decoration: none;
  color: black;
 }

 .home.current ~ hr,
   ul li.home:hover ~ hr {
   margin-left: 0%;
 }
   
  .about.current ~ hr,
   li.about:hover ~ hr {
      margin-left: 25%;
   }
  
  .portfolio.current ~ hr,
   li.portfolio:hover ~ hr {
    margin-left: 50%;
   }

  .contact.current ~ hr,
   li.contact:hover ~ hr {
   margin-left: 75%;
   }

hr {
 height: 3px;
 width: 25%;
 margin: 0;
 background-color: rgba(52, 152, 219, 0.3);
 transition-property: transform;
 transition: .3s ease-in-out;
   }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header id="header">
  <div class="nav">
    <ul>
      <li class="home"><a href="#home">Home</a></li><!--
   --><li class="about"><a href="#about">About</a></li><!--
   --><li class="portfolio"><a href="#portfolio">Portfolio</a></li><!--
   --><li class="contact"><a href="#contact">Contact</a></li>
     <hr />
    </ul>
 </div>
</header>

或者你想让下划线从屏幕的一侧出来？

编辑：添加了 js/jQuery，使菜单项在点击时保持不变。