<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<div class="container">
  <ul>
    <li class="one"><a class="default" href="#">All</a></li><!--
 --><li class="two"><a href="#">Articles</a></li><!--
 --><li class="three"><a href="#">Hackweek</a></li>
  <li class="bg"></li>
    <hr />
  </ul>
</div>
* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Montserrat', Helvetica, Arial;
  font-weight: 400;
  background-color: #efefef;
}

.bg {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: .25s;
  pointer-events: none;
}

.container {
  width: 50%;
  margin: 0 auto;
}

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

.default {
  color: #000;
  font-weight: 700;
}

li:first-child:hover ~ .bg {
  background: #efefef;
  transition: .5s ease-in-out;
  }

li:nth-child(2):hover ~ .bg {
  background: #fff;
  transition: .5s ease-in-out;
}

li:nth-child(3):hover ~ .bg {
  background: #efefef;
  transition: .5s ease-in-out;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #a2a2a2;
}

a:hover {
  transform: scale(1.1);
  font-weight: 700;
  color: #000;
}

.two:hover ~ hr {
  margin-left: 33%;
  width: 65px;
}

.three:hover ~ hr {
  margin-left: 56%;
  width: 90px;
}



hr {
  height: .25rem;
  width: 30px;
  margin-left:4rem;
  margin-top:-.2rem;
  background: #000;
  border: none;
  transition: .3s ease-in-out;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js