Как сделать такой эффект ховера?

Question

[Anton Essential]

Добрый день, подскажите как сделать похожий эффект ховера на линк в меню.

Answer 1

[Anton Essential]

В общем сделал сам, не идаельно но меня утсраивает. Может кому понадобиться

.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);
        });
    }

})();

Answer 2

[Astrohas]

.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