가상 요소 선택자

개념 이해하기

::before와 ::after는 요소 내부에 장식 조각을 만들고 ::first-letter, ::selection, ::marker는 특정 부분을 선택합니다. 핵심 콘텐츠는 HTML에 두고 가상 요소는 장식에 사용합니다.

두 .target 안에는 content가 빈 문자열인 ::before가 하나씩 생기고, position: absolute로 각 상자의 왼쪽 12px, 위 18px 지점에 7px 초록 점을 찍습니다. 점의 기준이 .target인 것은 .target에 position: relative가 있기 때문이며, 왼쪽 padding 28px가 점이 들어갈 자리를 비워 둡니다. 두 번째 상자는 ::first-letter가 첫 글자 하나만 2rem 크기의 갈색 글자로 키웁니다.

::first-letter는 블록 컨테이너에서만 동작해서 span 같은 인라인 요소에 쓰면 아무 변화가 없습니다. 첫 글자 앞에 놓인 구두점은 첫 글자와 함께 선택되므로, 따옴표로 시작하는 문단은 따옴표와 첫 글자가 같이 커집니다.