content

::before, ::after 가상 요소의 내용을 지정합니다. 장식 요소나 clearfix 패턴에 사용됩니다.

클래스 목록

클래스	CSS	설명
`contentEmpty`	content: ''	빈 문자열 콘텐츠 (가상 요소 생성용)

시각 데모

아래 두 요소에는 자식 태그가 없습니다. 보이는 선과 점은 모두 가상 요소이며, 빈 콘텐츠 클래스가 있어야 비로소 화면에 만들어집니다.

before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF

위쪽 가로선은 이 문단의 가상 요소입니다.

before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px

온라인

앞의 초록 점도 별도 태그가 아니라 가상 요소입니다.

사용 예시

가상 요소는 before- / after- 접두사로 스타일을 지정합니다.

<!-- Decorative pseudo-elements (dividers, etc.) -->
<div class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF">
  Content above the divider
</div>

<!-- clearfix Pattern -->
<div class="after-contentEmpty after-db after-clb">
  <div class="fl w50p">Float Left</div>
  <div class="fl w50p">Float Right</div>
</div>

<!-- Indicator dot -->
<span class="before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px">
  Online
</span>

클래스별 상세

`contentEmpty`content: ''

가상 요소에 빈 문자열을 넣어 실제로 만들어지게 합니다. 이 클래스가 없으면 크기와 배경을 아무리 지정해도 요소 자체가 존재하지 않아 화면에 아무것도 나오지 않습니다. 장식용 선, 점, 화살표, 겹침 그라디언트처럼 의미 없는 시각 요소를 만들 때 씁니다.

<!-- Nothing renders without contentEmpty -->
<p class="before-db before-w100p before-h1px before-bgFFFFFF">
  No rule appears: the pseudo-element was never created.
</p>

<!-- Add contentEmpty and the rule shows up -->
<p class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF">
  Now there is a hairline above this text.
</p>

`before-after-`가상 요소 접두사

가상 요소의 나머지 스타일은 앞뒤 접두사를 붙여 지정합니다. 가상 요소는 기본이 인라인이라 폭과 높이가 먹지 않으므로, 크기를 주려면 블록이나 인라인 블록 클래스를 함께 붙여야 합니다.

<!-- Inline by default: width and height are ignored -->
<span class="before-contentEmpty before-w8px before-h8px before-bg34D399">
  The dot has no size yet.
</span>

<!-- Add a display class and it becomes a real box -->
<span class="before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px">
  Now the dot is round and 8px wide.
</span>

실전 예시 — 상태 배지와 구분선 목록

상태 점이 붙은 배지와 항목 사이에 선이 들어간 목록입니다. 두 장식 모두 별도 태그 없이 가상 요소로만 만들어 마크업을 깨끗하게 유지합니다.

<!-- Status badge: the dot is generated, not a tag -->
<span class="before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px
             dib py6px px12px br6px bg1E1E2E b1pxsolid27272A fs13px cFAFAFA">
  Operational
</span>

<!-- List where each item draws its own hairline -->
<ul class="mt2rem">
  <li class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF
             py12px fs14px c71717A">Deploy pipeline</li>
  <li class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF
             py12px fs14px c71717A">Edge cache</li>
  <li class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF
             py12px fs14px c71717A">Webhook delivery</li>
</ul>

팁 / 주의사항

content 없이는 가상 요소가 존재하지 않는다

폭, 높이, 배경색을 모두 지정해도 콘텐츠 값이 없으면 가상 요소는 만들어지지 않습니다. 장식이 안 보인다면 이 클래스를 빠뜨렸는지부터 확인하세요.

일반 요소에는 적용되지 않는다

content 속성은 가상 요소에서만 의미가 있습니다. 접두사 없이 요소에 직접 붙이면 아무 일도 일어나지 않습니다.

장식 이외의 정보를 넣지 말 것

가상 요소의 내용은 복사와 붙여넣기에서 빠지고, 스크린 리더가 읽는 방식도 일정하지 않습니다. 의미 있는 문구는 반드시 실제 태그로 넣으세요.

인라인 기본값 때문에 크기가 안 먹는다

가상 요소는 기본적으로 인라인이라 폭과 높이가 무시됩니다. 점이나 막대를 만들려면 블록 계열 표시 클래스를 함께 붙여야 합니다.

치환 요소에는 가상 요소가 생기지 않는다

이미지나 입력 요소처럼 내부 콘텐츠를 브라우저가 대체하는 태그에는 가상 요소가 만들어지지 않습니다. 이런 경우에는 감싸는 요소에 장식을 붙이세요.

content는 필수

::before와 ::after는 content 속성이 없으면 렌더링되지 않습니다. 빈 문자열이라도 반드시 지정해야 합니다.

display 지정 필요

가상 요소는 기본적으로 inline입니다. 크기를 지정하려면 before-db나 before-dib를 함께 사용하세요.

display visibility position float