bar effect filling css in menu

Question

people need to recreate the menu effect of this site: http://mpcaminhoes.com.br/ but I’m not succeeding, I managed to create the bar and make the bar grow but it grows above the menu, capping the writing.... The way I tried is by making a class 0 wide after in the Hover take full width and add the Transition, I tried to do with the own menu background but it doesn’t work because as originally need to be 0 wide, then the menu is without initial width.... I’m a beginner, can anyone help me? follow the css code

.hover-menu:after{
 position: absolute;
 top:0px;
 border-radius: 0 15px 0 0;
 left:0%;
 width:0;
 height:50px;
 background:#fb3c03;
 display:block;
 content:"";
 transition: width 0.5s ease-in-out;
}
.hover-menu:hover:after{
 width:100%;
}

I took this code from a project and it uses the empty content... if I remove this empty content it doesn’t work.. css the Hover menu class is in my "a"

Answer 1

Just put z-index:-1 in the ::after there it appears behind the text.

OBS: put in the transition an effect equal to the site with cubic-bezier, left commented tb in css, now the animation is the same as the example site.

Take the example. (I left the comment in the code)

.hover-menu:after{
 position: absolute;
 top:0px;
 border-radius: 0 15px 0 0;
 left:0%;
 width:0;
 height:50px;
 background:#fb3c03;
 display:block;
 content:"";
 transition: width 0.5s ease-in-out;
transition-timing-function: cubic-bezier(0.52,1.64,.37,.66); /*animação para ficar igual a do site do exemplo */
 z-index: -1;  /* coloque z-index aqui */
}
.hover-menu:hover:after{
 width:100%;
}

<a href="#" class="hover-menu">link</a>
    

Answer 2

Must set z-index: -1 in the ::after and z-index: 1 element. Example:

body{
   background: #ddd;
}

ul, li{
   margin: 0;
   padding: 0;
}

li{
   list-style: none;
   padding: 10px;
   display: inline-block;
   background: #777;
   line-height: 1em;
   margin: 0 5px;
   cursor: pointer;
   color: #fff;
   position: relative;
   z-index: 1;
}

li::after{
   content: '';
   display: inline-block;
   width: 0;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: orange;
   z-index: -1;
   transition: width 0.5s ease-in-out;
}

li:hover::after{
   width: 100%;
}

<ul>
   <li>Menu 1</li>
   <li>Menu 2</li>
</ul>