<nav>
  <ul class="nav-ul">
    <li class="nav-li">
      <a href="#">Main</a>
    </li>
    <li class="nav-li">
      <a href="#">About</a>
    </li>
    <li class="nav-li">
      <a href="#">Projects</a>
    </li>
    <li class="nav-li">
      <a href="#">Contacts</a>
    </li>
  </ul>
</nav>

// Colors
@hfs: 16;
@clr-main: #1fbfac;
@clr-gray: #3a3a3a;
@clr-yellow: #FDC162;

a {
  color: inherit;
  text-decoration: none;
  outline: none;
}
.list-unstyled {
  padding: 0;
  margin: 0;
  list-style: none;
}
.box-sizing(@val: border-box) {
  box-sizing: @val;
}

* {
  .box-sizing;
}

html {
  background: lighten(#0AC2D2,50%);
}

nav {
  height: 100%;

  font-family: 'MuseoSansCyrl', sans-serif;
  color: @clr-gray;

  .nav-ul {
    .list-unstyled;
    margin: 47rem / @hfs 37rem / @hfs 0;
     text-align: center;
  }

  .nav-li {
    display: inline-block;
    font-size: 16em / @hfs;

    a {
       position: relative;
      display: block;
       margin: 0 2px;

      padding: 10rem / @hfs 20rem / @hfs;
      text-transform: uppercase;
       overflow: hidden;
      
       &:before {
         .box-sizing;         
         transform: translateX(100%);
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 99.5%;
         height: 2px;
         border-bottom: 2px solid transparent;
         border-left: 2px solid transparent;
       }
      
       &:after {
         .box-sizing;
         transform: translateX(-100%);
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 99.5%;
         height: 2px;
         border-top: 2px solid transparent;
         border-right: 2px solid transparent;
       }

      &:hover {
        color: inherit;
        text-decoration: none;
        
          &:before {
            transition: .1s transform linear, .1s height linear .1s;
            transform: translateX(0);
            height: 100%;
            border-color: @clr-main;
          }
          &:after {
            transition: .1s transform linear .2s, .1s height linear .3s;
            transform: translateX(0);
            height: 100%;
            border-color: @clr-main;
          }
      }
    }
  }
}