디자인은 디테일에 있다, ::after를 활용한 밑줄 애니메이션

selector::after {
  content: "";
  display: block;
  ...
}

import React from "react";
import "./TestPage.css"; // CSS 따로 분리

export default function TestPage() {
    return (
        <div className="container">
            <h2 className="title">가상 요소 ::after를 이용한 밑줄 애니메이션</h2>
            <button className="button">호버해보세요</button>
        </div>
    );
}

/* 전체 컨테이너 중앙 정렬 */
.container {
    display: flex;                      /* Flexbox 사용 */
    flex-direction: column;            /* 세로 방향으로 정렬 */
    align-items: center;               /* 가로 기준 중앙 정렬 */
    justify-content: center;           /* 세로 기준 중앙 정렬 */
    padding-top: 100px;                /* 상단 여백 */
}

/* 제목 스타일 */
.title {
    font-size: 24px;                   /* 글자 크기 */
    margin-bottom: 30px;              /* 아래쪽 여백 */
}

/* 버튼 기본 스타일 */
.button {
    position: relative;                /* ::after의 기준이 되는 상대 위치 */
    padding: 10px 20px;               /* 내부 여백 */
    font-weight: bold;                /* 글자 굵게 */
    cursor: pointer;                  /* 마우스 커서를 손가락으로 표시 */
    background: none;                 /* 배경 제거 */
    border: none;                     /* 테두리 제거 */
    font-size: 16px;                  /* 글자 크기 */
    color: royalblue;                 /* 글자 색상 */
}

/* ::after 가상 요소로 밑줄 구현 */
.button::after {
    content: "";                      /* 가상 요소 필수, 내용 없음 */
    position: absolute;              /* 부모 기준 절대 위치 */
    bottom: 0;                        /* 아래쪽에 위치 */
    left: 0;                          /* 왼쪽부터 시작 */
    height: 3px;                      /* 밑줄 두께 */
    width: 100%;                      /* 버튼 전체 너비만큼 */
    background-color: royalblue;     /* 밑줄 색상 */
    transform: scaleX(0);            /* 처음엔 가로 크기 0으로 숨김 */
    transform-origin: center;        /* 가운데 기준으로 확대/축소 */
    transition: transform 0.3s ease; /* 부드럽게 전환 */
}

/* hover 시 밑줄 퍼지게 만들기 */
.button:hover::after {
    transform: scaleX(1);            /* 가로 크기 100%로 보여줌 */
}