tailwind underline animation 下線部のアニメーション実装

1
2<div>
3    <Link
4      href={"/"}
5      className="transition-opacity duration-300 hover:opacity-20  min-w-5"
6    >
7      <div className="flex items-center gap-1 ">
8        <HomeIcon fontSize="small" sx={{ color: "black" }} />
9        <div>
10          <p className="text-lg group relative font-bold text-black ">
11            <span> ホーム</span>
12            <span className="absolute -bottom-1 left-0 w-0 transition-all h-0.5 bg-black group-hover:w-full"></span>
13          </p>
14        </div>
15      </div>
16    </Link>
17  </div>
18  <div>
19    <Link
20      href={"/mix"}
21      className="transition-opacity duration-300 hover:opacity-20  min-w-5"
22    >
23      <div className="flex items-center gap-1 ">
24        <ArticleIcon fontSize="small" sx={{ color: "black" }} />
25        <div>
26          <p className="text-lg group relative font-bold text-black ">
27            <span> 雑多記事</span>
28            <span className="absolute -bottom-1 left-0 w-0 transition-all h-0.5 bg-black group-hover:w-full"></span>
29          </p>
30        </div>
31      </div>
32    </Link>
33  </div>
34  <div>
35    <Link
36      href={"/code"}
37      className="transition-opacity duration-300 hover:opacity-20  min-w-5"
38    >
39      <div className="flex items-center gap-1 ">
40        <IntegrationInstructionsIcon fontSize="small" sx={{ color: "black" }} />
41        <div>
42          <p className="text-lg group relative font-bold text-black ">
43            <span> 開発</span>
44            <span className="absolute -bottom-1 left-0 w-0 transition-all h-0.5 bg-black group-hover:w-full"></span>
45          </p>
46        </div>
47      </div>
48    </Link>
49  </div>
50  <div>
51    <Link
52      href={"/contact"}
53      className="transition-opacity duration-300 hover:opacity-20  min-w-5"
54    >
55      <div className="flex items-center gap-1 ">
56        <EmailIcon fontSize="small" sx={{ color: "black" }} />
57        <div>
58          <p className="text-lg group relative font-bold text-black ">
59            <span> お問い合わせ</span>
60            <span className="absolute -bottom-1 left-0 w-0 transition-all h-0.5 bg-black group-hover:w-full"></span>
61          </p>
62        </div>
63      </div>
64    </Link>
65  </div>
66