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