如何使用本机反应将鼠标悬停在文本下划线？

Question

我正在尝试在文本中添加悬停下划线。就像这个例子一样：如何悬停下划线从中心而不是左侧开始？

  a: { color: "#333", textDecoration: "none" },
  "a:after": {
    content: "''",
    position: "absolute",
    left: "50%",
    bottom: "-2px",
    width: "0px",
    height: "2px",
    background: "#333",
    transition: "all 0.45s",
  },
  "a:hover:after": { left: "0", width: "100%" },
  "a:hover": { textDecoration: "none" },

})

--------------------

export function pagepastCat() {
  const classes = estilos();
 return (
            <p>
              <a href="" className={classes.a}>
                SOME TEXT
              </a>
            </p>
)
}

但我明白了......:(

在此输入图片描述

Answer 1

我刚刚写了这个，它有效！

const estilos = makeStyles({
a: {
    position: "relative",
    textDecoration: "none",
    fontWeight: 400,
    color: "rgb(59, 4, 4)",
    transition: "all .35s ease",
    "&::before": {
      content: '""',
      position: "absolute",
      width: "100%",
      height: "2px",
      bottom: "0",
      left: "0",
      backgroundColor: "rgb(59, 4, 4)",
      visibility: "hidden",
      WebkitTransform: "scaleX(0)",
      transform: "scaleX(0)",
      WebkitTransition: "all 0.3s ease-in-out 0s",
      transition: "all 0.3s ease-in-out 0s",
    },
    "&:hover": {
      color: "rgb(59, 4, 4)",
      "&::before": {
        visibility: "visible",
        WebkitTransform: "scaleX(1)",
        transform: "scaleX(1)",
      },
    },
  },
})

-----------

          <p style={{ fontSize: 20 }}>
            <a href="" style={{ textDecoration: "none" }} className={classes.a}>
              {" "}
              SOME TEXT
            </a>
          </p>