Как сделать такой эффект ховера?
.menu-item {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.menu-item:before {
  transition: .5s all;
  display: block;
  content: "";
  width: 100%;
  height: 2px;
  background-color: black;
  position: absolute;
  top: 50%;
  left: -100%;
  z-index: 10;
}
.menu-item:hover:before {
  left: 100%;
}
https://codepen.io/anon/pen/WjLbyG
***
PS: В оригинальном сайте все вычисляется по JS
В общем сделал сам, не идаельно но меня утсраивает. Может кому понадобиться.main-menu
    &__link 
       position relative
       overflow hidden
       +before('')
          display block
          width 100%
          height 4px
          background-color $yellow
          position absolute
          top 50%
          transform translateX(-116%)
          z-index 1
      
.is-active
   +before()
      transform translateX(116%)
      transition ease-in-out .6s(function() {

    var link = $('.main-menu__link');

    if(!link.hasClass('is-active')) {
        link.mouseover(function(event) {
            $(this).addClass('is-active')
        })
        link.mouseleave(function(event) {
            var self = $(this);
            setTimeout(function(){
                self.removeClass('is-active')
            },300);
        });
    }

})();