材質 UI CSS Animation 用於下划線

Question

我一直在嘗試在 material-UI 中實現 animation，其中標簽的下划線從左到右移動。 到目前為止我寫的代碼是

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>