content

CSS Reference

content는 주로 ::before와 ::after 같은 가상 요소에 텍스트·카운터·이미지 등의 생성 콘텐츠를 지정합니다. DOM의 원문을 직접 수정하는 기능이 아니므로 중요한 정보와 실제 링크·버튼을 CSS 생성 콘텐츠로만 제공하지 마세요.

문법과 주요 값

.tag::before { content: "안내: "; }
.item::after { content: " (" attr(data-label) ")"; }

값 또는 구분	동작과 선택 기준
`"문자열"`	가상 요소에 표시할 텍스트
`attr(data-label)`	요소의 속성 값을 문자열로 표시
`counter(...)`	CSS 카운터 값 표시
`open-quote / close-quote`	인용 부호 생성
`none / normal`	가상 요소의 생성 여부 등에 영향

값의 적용 범위와 문법은 MDN의 content 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 content-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>content 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target::before { content: "안내: "; color: #006c9c; font-weight: bold; }
.target::after { content: " (" attr(data-label) ")"; }
.reference::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #006c9c; margin-inline-end: 6px; }
</style>
</head>
<body>
<main id="demo">
<h1>content 적용 비교</h1>
<section class="samples"><div><p class="label">문자열과 attr()</p><p class="target" data-label="새 항목">본문 콘텐츠</p></div><div><p class="label">빈 content로 장식 도형</p><p class="reference">본문 콘텐츠</p></div></section>
</main>
</body>
</html>

첫 예문 앞뒤에 문자열이 생성되고 data-label 값이 뒤에 표시됩니다. 두 번째 예문은 빈 문자열로 가상 요소를 만들고 배경과 크기로 장식 도형을 그립니다.

가상 요소가 생기는 조건

::before와 ::after에 크기나 배경을 지정했는데 보이지 않으면 content가 none이나 normal로 남아 있는지 확인하세요. content: ""는 빈 문자열이지만 가상 요소를 만들어 장식 박스를 표시할 수 있습니다. img 같은 대체 요소에는 같은 방법을 일반적으로 적용할 수 없습니다.

이미지·카운터와 접근성

content: url(...)로 생성한 이미지는 일반 배경 이미지와 크기 조절 방식이 같지 않습니다. 단순 장식 아이콘은 빈 가상 요소의 background-image와 크기를 함께 지정하는 방식이 관리하기 쉽습니다. CSS 카운터는 번호를 만들 수 있지만 중요한 번호·설명은 실제 목록과 DOM에 의미가 남도록 설계하세요. 스크린 리더가 생성 콘텐츠를 언제나 같은 방식으로 읽는다고 가정하지 않습니다.