<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;
}
This Pen doesn't use any external CSS resources.