React로 nav바 밑줄 애니메이션 만들기

Nav바를 만들었었는데 버튼에 밑줄 애니메이션을 넣으면 이쁠것 같아서 구글링으로 한번 만들어 봤다.
nav바 만들기는 여기에 정리해놨다.

우선 버튼에 대한 코드만 보면

코드

import { makeStyles } from "@mui/styles";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";

const useStyles = makeStyles({
  root: {
    width: "400px",
    display: "flex",
    justifyContent: "space-between",
  },
  btn: {
    display: "inline-block",
    position: "relative",
    color: "white",
    fontSize: "25px",
    backgroundColor: "transparent",
    border: "0",
    "&:hover": {
      fontWeight: "bold",
      cursor: "pointer",
    },
    "&:after": {
      content: '""',
      position: "absolute",
      width: "100%",
      transform: "scaleX(0)",
      height: "7px",
      top: "29px",
      left: 0,
      backgroundColor: "#4EC5D6",
      transformOrigin: "center",
      transition: "transform 0.25s ease-out",
    },
    "&:hover:after": {
      transform: "scaleX(1)",
      transformOrigin: "center",
    },
  },
  underLine: {
    textDecoration: "underline",
    textDecorationColor: "#4EC5D6",
    textDecorationThickness: "8px",
    fontWeight: "bold",
  },
});

interface IButtonContainerProps {
  path: string;
}

export const ButtonContainer = ({ path }: IButtonContainerProps) => {
  const classes = useStyles();
  const buttonList = [
    { text: "회사 소개", path: "/" },
    { text: "공지사항", path: "/notice" },
    { text: "FAQ", path: "/faq" },
  ];
  const [selected, setSelected] = useState(path);
  const navigate = useNavigate();
  const buttonHandler = (text: string, path: string) => {
    setSelected(text);
    navigate(path);
  };
  return (
    <div className={classes.root}>
      {buttonList.map((item) => {
        return (
          <p
            className={`${classes.btn} ${
              item.text === selected ? classes.underLine : ""
            }`}
            onClick={() => {
              buttonHandler(item.text, item.path);
            }}
          >
            {item.text}
          </p>
        );
      })}
    </div>
  );
};

📌 makeStyles랑 Grid가 너무 편해서 MUI를 사용했다

버튼

버튼에 대한 코드는 쉬우니 넘어가고 css쪽만 보자면
position: relative로 버튼을 설정해 주고 크기는 원하는 대로 설정해 줬다.
그리고 hover시에 굵기랑 포인터 설정을 기본적으로 해줬다.

:after

다음으로는 가상 요소를 만들어 줬다.
✅ content를 makestyles에선 '""'로 해줘야 하고 다른 css를 사용하더라도 content를 빈 문자열로 꼭 설정해줘야 된다 아니면 안나옴...
가상 요소를 밑줄모양으로 만들어 주고 hover시에 나오도록 코드를 짰다.

결과