<div class="header">
  <div class="logo">
    Company Title
  </div>
  <div class="menu">
    <a href="#" class="link">
      <div class="title">About</div>
      <div class="bar"></div>
    </a>
    <a href="#" class="link">
      <div class="title">Work</div>
      <div class="bar"></div>
    </a>
    <a href="#" class="link">
      <div class="title">Contact</div>
      <div class="bar"></div>
    </a>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800);

html, body {
  font-family: 'Dosis';
  font-weight: 300;
}

.header {
  width: 100%;
  border-bottom: 1px solid black;
  text-align: right;
  position: relative;
  
  .logo {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 32px;
    font-weight: 100;
    padding: 26px;
    border-right: 1px solid black;
  }
}

.link {
  display: inline-block;
  padding: 15px 0;
  margin: 15px 25px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  color: #0f0f0f;
  font-weight: 800;
  font-size: 24px;
  
  .bar {
    width: 100%;
    display: inline-block;
    border-bottom: 5px solid black;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 300ms;
  }
  
  &:hover {
    .bar {
      opacity: 1;
      bottom: 5px;
    }
  }
}