How to hover underline a text with react native?

Question

I am trying to make a hover underline in a text. Like in this example: How to hover underline start from center instead of left?

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

But I am getting this.... :(

enter image description here

Answer 1

I just wrote this, and it works!

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}>
              {" "}
              Individuals
            </a>
          </p>