Material UI CSS Animation for underline

Question

I have been trying to implement animation in material-UI, where the underline moves from left to right for the tab. So far the code I have written is

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>
  );
}

When I run this, the tab is getting default behavior and not the one intended

I am using this link as reference

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>