transitionでボタンアニメーションを実現したい。

Question

##環境

visual studio code
sass
html

##実現したいこと

hoverすると擬似要素が横からスライドしてくるボタンアニメーションを実装したい

##問題点

hoverしてもアニメーションが開始されない

##考えられること

・hover時のセレクタ指定がずれている
・transitionプロパティの指定が間違っている

##コード

 <div class="customer__btn">
   <a href="#">公式LINE</a>
 </div>

.customer {
   &__btn {
    a {
	position: relative;
	color: #31d300;
	display: block;
	background: #fff;
	width: 150px;
	text-align: center;
	margin: 50px auto;
	height: 45px;
	line-height: 45px;
	font-size: 20px;
	overflow: hidden;

	   &::before {
	   content: "";
	   display: inline-block;
	   position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	   background-color: #31d300;
	   transform: translateX(-100%);
	   z-index: -1;
	   transition: transform 1s;
	   }

   &:hover {
	   &::before {
		   transform: none;
	    }
     }
   }
}

Answer 1

こんにちは。
z-index: -1なので背景の下に回っているのでは？

        &::before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #31d300;
        transform: translateX(-100%);
        //z-index: -1;
        transition: transform 1s;
        }

または、

    &__btn {
     a {
     position: relative;
     color: #31d300;
     display: block;
     //background: #fff;