li 클릭 시 border button 선 만들기

💭 li 밑에 선이 항상 있게하게 하고 li를 클릭 했을때, 해당 부분의 선만 굵게 나타내고 싶어서 비슷한 페이지를 찾아 만들어보았다.

1️⃣ 완성본

2️⃣ 코드

2️⃣-1️⃣ HTML

        <div className={style.poseselect_container}>
          <nav>
            <ul>
              <li>초급</li>
              <li>중급</li>
              <li>고급</li>
            </ul>
          </nav>
        </div>

2️⃣-2️⃣ SCSS

      nav {
        width: 100%;

        > ul {
          padding: 0.5px 2px;

          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #CFC4B1;

          > li {
            cursor: pointer;

            font-size: 2em;
            font-weight: 500;

            text-align: center;
            @include text-color($color-5);
            padding-bottom: 7px; 
        
            &:hover {
              font-weight: 600;
              @include text-color($color-6);
              transform: scale(1.1);
              border-bottom: 2px solid #A59983; 
            }
          }
        }
      
      }

3️⃣ 설명

ul에 border-bottom으로 계속 유지될 선을 만들고, li가 호버될 때 li의 border-bottom이 활성화되게 하여 겹쳐지게 하였다.

🗂️ 참고
https://josuntns.josunhotel.com/