Материал UI CSS Анимация для подчеркивания

Question

Я пытался реализовать анимацию в Material-UI, где подчеркивание перемещается слева направо для вкладки. Пока что код, который я написал, -

const useStyles = makeStyles({
link: {
    padding: "1rem",
    color: "black",
    fontSize: "18px",
    fontWeight: "400",
    lineHeight: "24px",
    position: "relative",

    "&:before": {
      content: "''",
      position: "absolute",
      width: "0",
      height: "2px",
      bottom: "0",
      left: "0",
      backgroundColor: "#FFF",
      visibility: "hidden",
      transition: "all 0.3s ease-in-out",
    },
    "&:before:hover": {
      visibility: "visible",
      width: "100%"
    }
  }
}

function Tab(props) {
  const classes = useStyles();
  const {href} = props;
  const preventDefault = (event) => event.preventDefault();
  return (

    <Link href={href} onClick={preventDefault} className={classes.link}>
      <Typography variant="h6">{props.children}</Typography>
    </Link>
  );
}

Когда я запускаю это, вкладка получает поведение по умолчанию, а не то, которое предполагалось

Я использую эту ссылку как ссылка

Answer 1

.test{
  color:red;
  position:relative;
  display:inline-block;
}
.test::before{
      content: "";
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background-color: green;
      visibility: "hidden";
      transition: all 0.3s ease-in-out;
    
}
.test:hover::before{
  visibility: visible;
      width: 100%;
}

<div class="test">
hover me
</div>