用于下划线的 Material 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>
  );
}

当我运行此选项卡时，该选项卡将获得默认行为，而不是预期的行为

我使用this 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>