CSS Анимация подчеркивания при наведении курсора, при активном пребывании

Question

Я учусь использовать React и SASS вместе.

У меня есть следующий код SASS

.option{
  color: white;
  margin: 10px;
  padding: 7px 5px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  animation: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: white;
    height: 2px;
    animation: left, right;
    transition-property: left, right;
    animation: 0.3s;
    transition-duration: 0.3s;
    animation: ease-out;
    transition-timing-function: ease-out;
  }

  &:hover:before, &:hover:focus:before, &hover:active:before{
    left: 0;
    right: 0;
  }
}

}

Что я пытаюсь сделать, это когда текст находится над ним, подчеркивает его анимацией. Затем, когда вы выбираете опцию, подчеркивание остается вместо перехода.

Кажется, я не могу понять это.

Я просто делаю это на базовой c странице реакции.

<div className="options">
      <Link className="option" to="/">
        Home
      </Link>
      <Link className="option" to="/test1">
        Test1
      </Link>
      <Link className="option" to="/test2">
        Test2
      </Link>
    </div>

Answer 1

Спасибо @ Temani-Afif, это просто ускользало от меня.

разделение сработало

&:active:before{
        left:0;
        right:0;
      }

      &:focus:before{
        left:0;
        right:0;
      }


      &:hover:before{
        left: 0;
        right: 0;
      }