content

CSS Reference

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

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`content`	normal (::before/::after에서는 none으로 계산)	아니요	주로 ::before·::after 등의 생성 콘텐츠

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.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에 의미가 남도록 설계하세요. 스크린 리더가 생성 콘텐츠를 언제나 같은 방식으로 읽는다고 가정하지 않습니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 파일의 .reference::before에서 content만 "", none, normal로 바꾸어 파란 점이 보이는지 비교합니다. 크기·배경은 그대로 두고 마지막에 빈 문자열로 복구합니다.
data-label을 새 항목에서 수정 항목으로 바꾸면 접미사가 바뀝니다. 속성을 지웠을 때와도 비교한 뒤 복구합니다. 사용자가 반드시 읽어야 하는 제목·버튼 이름은 실제 HTML에 둡니다.

선택자와 생성 상자 구성은 ::before와 ::after로 가상 요소 꾸미기에서 확인할 수 있습니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 quotes입니다.