데스크톱에서 봐야 제대로 보입니다. 관찰에 좋게 밑줄은 2px로 했습니다.
1. focus시 border-bottom 생성: 글자가 위로 움찔
검색
2. 투명 밑줄을 미리 넣어둠: 안정적, 트랜지션 가능
검색
3. 그냥 box-shadow: 밑줄이 버튼보다 좀 아래라서 조금 어색
검색
4. inset box-shadow: 좋음
검색
5. inset box-shadow에 투명 그림자를 미리 넣어 둠: 더 좋음, 트랜지션 가능
검색
6. outline을 억지로 사용: 1px 밑줄을 못 그음, 버튼까지 덮지 않게 하려면 right에 고정값을 줘야 함, 이렇게 가상요소와 position: absolute를 사용한다면 그냥 border를 사용해도 됨 - absolute는 기존 레이아웃에 영향을 미치지 않음.
검색
outline은 밑줄만 넣을 수가 없어서 이 경우엔 사용이 힘듦.
트랜지션을 넣으려면 투명색이 먼저 있는 게 좋음.