pseudo-element ::before ::after

핵심 개념

::before와 ::after는 HTML을 수정하지 않고 CSS만으로 요소 앞/뒤에 콘텐츠를 삽입합니다. content 속성이 필수이며 빈 문자열('')도 가능합니다. position:absolute와 함께 사용하면 장식 요소를 자유롭게 배치할 수 있습니다. ::before content를 지우며 아이콘이 사라지는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (4줄)

<style>.pe-item{position:relative;padding:12px 12px 12px 30px;background:#0d1117;color:#e8e8e8;margin-bottom:6px;font-family:monospace;border:1px solid #1a1a1a;}.pe-item::before{content:'▶';position:absolute;left:10px;color:#10b981;}.pe-title{font-size:20px;font-weight:bold;color:#e8e8e8;font-family:monospace;margin-bottom:6px;}.pe-title::after{content:' ——';color:#10b981;}</style>
<div class='pe-title'>SECTION TITLE</div>
<div class='pe-item'>before로 아이콘 자동 추가</div>
<div class='pe-item'>CSS만으로 리스트 마커 구현</div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'pseudo-element' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'pseudo-element'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'pseudo-element' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'pseudo-element'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

pseudo-element ::before ::after는 이 3가지만 확실히 잡으세요

1.장식 요소마다 빈 span을 HTML에 추가하면 마크업이 오염되고, 콘텐츠와 스타일의 분리가 무너집니다

2.::before와 ::after는 content 속성으로 가상 요소를 생성하며, HTML을 수정하지 않고 시각적 장식을 추가합니다

3.다음 챕터에서 여러 CSS 규칙이 충돌할 때 어떤 것이 이기는지 결정하는 selector 우선순위를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.27 — 질문하거나 답변을 확인하세요

→

진행도 27 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)