CODEWITHSUNDEEP
htmlcssreactjsmaterial-ui
Eswar Saladi
Eswar Saladi

Reputation: 135

Material UI CSS Animation for underline

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

Upvotes: 0

Views: 1532

Answers (1)

devd
devd

Reputation: 703

.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>

Upvotes: 2

Related Questions