가상선택자 before, after에 관한 오해

가상선택자 before, after에 관한 오해

물론 나만 오해했을 수 있다. (뭐야? 나만 바보야?) 처음 before, after에 대한 설명을 읽었을 때는 제대로 이해한 줄 알았는데 css 속성을 설정하면서 이상하다는 생각이 들었다. 어떤 태그에 before를 붙이면 그 태그의 형제 관계로 앞쪽에 위치하는 줄 알았다. 아니었다. before가 붙은 태그의 자식 관계에 위치한다. 예를 들어, 아래와 같은 코드가 있다고 해보자.

결과는 아래와 같다.

가상선택자 before, after로 만든 "좌", "우"라는 글씨는 div 태그 내부에 표시되는 것을 확인할 수 있다. div 태그 내부에 있는 텍스트 "기준"의 앞쪽은 before, 뒤쪽은 after 이다. 내가 처음 이해했던대로 div 태그의 형제 관계로 앞쪽에 있었다면 "좌", "우" 글자는 회색 테두리선 밖에 있어야 했다.