:after에 설명해주신 css 차이가 이해가 어렵습니다.

Question

header .lnb li a span:after {position: absolute; left:0; bottom:0; content:""; display:block; width: 100%; height: 1px; background: #2d5b79;} header .spot li:after {content:""; position: absolute; left: 0; top: 50%; width: 1px; height: 7px; background: #ccc; transform: translateY(-50%); }   1강에서 40분쯤에 이렇게 강의를 해주셨는데 span:after 에는 display:block;을 주셨고 li:after 에는 display:block; 을 안주셨더라고요 둘 다 똑같이 선을 만드는 css인데요 (차이는 좌우에 만드느냐, 아래에 만드느냐)   이 두개의 차이는 뭔지 설명 좀 부탁드리겠습니다 : ) ㅜㅜ

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. rooftop7788님, CSS의 :after 의사 요소에 관련된 질문 주셔서 감사합니다. span:after 에 display: block; 속성을 부여한 이유와 li:after 에 해당 속성을 부여하지 않은 이유에 대해 설명드리겠습니다. :after 의사 요소는 기본적으로 인라인(inline) 요소로 취급됩니다. display: block; 속성을 지정하게 되면 해당 요소가 블록 레벨(block-level) 요소처럼 동작하게 되어, 가로 폭 전체를 차지하며 줄바꿈이 일어납니다. span:after 에서 display: block; 을 추가하신 이유는 아마도 span 태그 내부에 새로운 블록 레벨 요소로 선을 만들기 위함으로 추측됩니다. 선을 만들기 위해 width: 100%; 와 height: 1px; 를 지정하고 있으며, display: block; 을 통해 가로 선의 형태를 만드는 데 필요한 블록 레벨 요소의 특성을 부여한 것입니다. 반면, li:after 에서는 display: block; 을 지정하지 않았는데, 여기서도 선을 만들고 있지만, width: 1px; 과 height: 7px; 로 세로 선을 만들고 있음을 알 수 있습니다. 아마도 li:after 가 인라인 요소로 충분하기 때문에 별도로 블록 레벨 요소로 변경할 필요가 없었던 것으로 보입니다. 또한, top: 50%; 와 transform: translateY(-50%); 를 이용하여 선을 수직 정렬하고 있는데, 이는 선을 li 요소의 중앙에 위치시키기 위함입니다. 두 코드에서 공통적으로 position: absolute; 를 사용하여 요소를 절대 위치에 놓고, 차이점은 가로 선을 만들느냐 세로 선을 만들느냐에 있습니다. 따라서 display: block; 속성의 유무는 이러한 디자인 목적에 따라 달라질 수 있습니다. 설명이 도움이 되셨기를 바라며, 질문이 더 있으신 경우 언제든지 문의해 주세요!