::before와 ::after 같은 pseudo-element란 무엇인가요?

Question

Accepted Answer

**pseudo-element**(콜론 둘 `::`)는 요소의 특정 *부분*을 스타일링하거나, HTML에 없는 **콘텐츠를 생성**합니다 — 추가 마크업 없이. ## ::before와 ::after — 생성된 콘텐츠 ```css .note::before { content: "💡 "; /* 필수 — 비어 있어도: content: "" */ } .external-link::after { content: " ↗"; /* 외부 링크 뒤에 아이콘 추가 */ } ``` `content` 속성은 필수입니다 — 그것이 없으면 pseudo-element가 렌더링되지 않습니다. 생성된 콘텐츠는 요소의 맨 앞(`::before`)이나 맨 뒤(`::after`)에 있는 자식입니다. ## 추가 div 없이 장식용 도형 ```css .tooltip::after { content: ""; /* 비어 있지만 존재 → box 생성 */ position: absolute; border: 8px solid transparent; border-top-color: black; /* CSS 삼각형 (tooltip 화살표) */ } ``` 이것이 전형적인 사용 사례입니다: 화살표, badge, 오버레이, 장식선 그리기 — HTML을 순전히 시각적인 요소로부터 깨끗하게 유지합니다. ## 기타 pseudo-element (요소의 일부를 스타일링) ```css p::first-line { font-weight: bold; } /* 렌더링된 첫 번째 줄 */ p::first-letter { font-size: 3em; } /* 첫 글자 강조(drop cap) */ ::selection { background: yellow; } /* 강조/선택된 텍스트 */ input::placeholder { color: gray; } /* placeholder 텍스트 */ ``` ## 콜론 하나 vs 둘 ```css .x:hover { } /* pseudo-CLASS (상태) — 콜론 하나 */ .x::before { } /* pseudo-ELEMENT (부분) — 콜론 둘 */ ``` CSS3는 pseudo-element를 pseudo-class와 구분하기 위해 `::`를 도입했습니다(브라우저는 호환성을 위해 옛것에 콜론 하나도 여전히 허용하지만, `::`를 사용하세요). ## 접근성 참고 생성된 `content`는 일부 스크린 리더가 읽습니다 — `::before`/`::after`에만 필수 정보를 두지 마세요(장식용으로 사용하세요). 그리고 장식용 아이콘은 접근성 트리에서 빼는 것이 가장 좋습니다. ## 왜 중요한가 pseudo-element는 추가 `

`나 `` 없이 순전히 CSS로 아이콘, 장식 도형(화살표, 구분선), drop cap, 카운터를 추가하게 해줍니다. 이들은 마크업을 시맨틱하게 유지하면서도 풍부한 시각적 디테일을 가능하게 하며, 깔끔하고 유지보수하기 좋은 스타일링의 핵심 요소입니다.