How to make a line spread from the center to the sides upon hover?-CodePudding

I created a set of buttons which upon hovering will have a line under them appear from the right side going on till it reaches the extent of the button's width. But what I really want is for the line's origin of appearance to begin, not from the right side, but from the center and then end on both ways. How to do that? Can you guys plz help me?

HTML

<div >
          <button >Products</button>
          <button >Solutions</button>
          <button >Resources</button>
          <button >Academy</button>
          <button >Partners</button>
          <button >Company</button>
        </div>

CSS

button{
  background:none;
  border:none;
  outline: none;
}

.nav-buttons{
  display: flex;
  align-items: center;
  column-gap: 30px;
}

.nav-button{
  font-size: 1rem;
  cursor: pointer;
  position: relative;
}

.nav-button::after{
  content: '';
  height: 3px;
  width: 0;
  background-color: #009688;
  position: absolute;
  left: 0;
  bottom: -20px;
  transition: width 0.5s;
}

.nav-button:hover::after{
  width: 100%;
}

CodePudding user response：

Please try with this cod.

button{
  background:none;
  border:none;
  outline: none;
}

.nav-buttons{
  display: flex;
  align-items: center;
  column-gap: 30px;
}

.nav-button{
  font-size: 1rem;
  cursor: pointer;
  position: relative;
}

.nav-button::after{
  content: '';
  height: 3px;
  width: 0;
  background-color: #009688;
  position: absolute;
  left: 0;
  bottom: -20px;
  -webkit-transform: scaleX(0);  
          transform: scaleX(0);  
  -webkit-transition: -webkit-transform 250ms ease-in-out;  
  transition: -webkit-transform 250ms ease-in-out;  
  transition: transform 250ms ease-in-out;  
  transition: transform 250ms ease-in-out, -webkit-transform 250ms ease-in-out;
  visibility: hidden;

}

.nav-button:hover::after{
  width: 100%;
  visibility: visible;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);  
}

<div >
  <button >Products</button>
  <button >Solutions</button>
  <button >Resources</button>
  <button >Academy</button>
  <button >Partners</button>
  <button >Company</button>
</div>