가상클래스 질문 드려도 될까요? 너무 헷갈립니다 ㅠㅠㅁ

Question

< html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document < style > .nav { border : 1px solid black ; width : 700px ; height : 100px ; margin : auto ; text-align : center ; line-height : 100px ; } .nav a { /* border: 1px solid black; */ color : black ; text-decoration : none ; margin-right : 15px ; font-size : 1.5rem ; position : relative ; } .nav a::before { content : '' ; width : 100% ; height : 3px ; background-color : royalblue ; display : inline-block ; position : absolute ; bottom : -3px ; left : 50% ; transform : translateX ( -50% ); } < body > < div class = "nav" > < a href = "#" > HOME < a href = "#" > ABOUT < a href = "#" > SERVICE < a href = "#" > PORTFOLIO < a href = "#" > CONTACT a에 position:relative를 주고 a::before에 position:abosolute를 주면 a::before의 width:100% 값이 a의 콘첸츠 값만큼 가지는데 position을 주지않으면 nav의 width값 만큼 가집니다 왜 이렇게 작동하는지 잘 모르겠습니다 ㅠㅠㅠ 만약 a::before가상요소를 주게 되면 a::before는 a의 자식요소가 되는건가요 그리구 다른 질문인데요 .gnb li에 float:left를 주면 부모인 .gnb는 높이값을 왜 잃지 않고 가지고 있는건가요 ? ㅠ.ㅠ

코딩웍스(Coding Works) · Answer

a::before가상요소를 주게 되면 a::before는 a의 자식요소가 되는건가요? 네. 맞습니다. :before :after는 원래 요소의 자식요소입니다. 그리고 인라인 요쇼입니다. 그래서 크기값을 가질 수 없습니다. 크기값을 주기 위해 display: block 또는 display: inline-block으로 변경해주어야 합니다. 만약 position: fixed 또는 absolute를 주었다면 인라인블록으로 변경되었기 때문에 크기값을 가질 수 있습니다. 곧, :before :after에 position: fixed 또는 absolute를 주고 display: block 또는 display: inline-block를 적는건 불필요한 코딩입니다. display 속성에 대한 이해가 부족한 것 입니다. 지금 절 이해하고 있으시다고 생각합니다.  .gnb li에 float:left를 주면 부모인 .gnb는 높이값을 왜 잃지 않고 가지고 있는건가요 ? 위에 코드에는 .gnb 도 없고 li 도 없는데요. 다른걸 말하시는것 같습니다. 코드에는 없지만 질문에 답은 .gnb li에 float:left를 주면 부모인 .gnb는 높이값을 잃습니다.

rudals8920 · Answer

친절하게 답변 달아 주셔서 감사합니다!