css에서 밑줄 오류가 생기는 경우는 거의 보지 못한 것 같아요.
하지만 이번에 퍼블 작업 하면서 처음으로 밑줄 오류가 생겼는데요!

이럴 경우 어떻게 작성해야 제대로 보여지는지 함께 알아보아요 😎

우선 텍스트에 밑줄을 넣기 위해서는 보통 아래와 같은 방법을 사용하는데요.

1. before, after 라는 가상 선택자 사용

2. text-decoration 속성 사용

3. border-bottom 속성 사용

먼저 1번의 경우 아래 코드와 같이 입력하여 밑줄 스타일을 삽입하게 되는데,

- 만약 display:inline-block;을 입력하지 않는다면 이렇게 줄바꿈이 되는 부분에 밑줄이 생기지 않는 오류가 발생하고,

- display:inline-block; 을 입력해도 inline-block 속성 때문에 아예 자동 줄바꿈이 되어버려 디자인과는 달라지게 되었습니다.

또, text-decoration 으로는 text-underline-offset 속성으로 텍스트와 겹치게 할 수는 있지만 텍스트 뒤로 가는 밑줄은 텍스트가 가려서 보이지 않게 되고,

border 로는 밑줄이 텍스트와 겹쳐지게 작업할 수 있는 방법이 없었습니다. (밑줄이 텍스트 아래에만 생깁니다.)

그래서 찾은 방법은  box-shadow를 사용하는 방법입니다!

- box-shadow 속성을 사용하면 줄바꿈이 있는 위치에도 밑줄이 그대로 보여지게 됩니다!

👉 box-shadow 속성으로 밑줄 스타일을 넣을 수 있다는 것을 알고 계시면 좋을 것 같습니다! : )