AAtomic CSS

content

::before와 ::after 의사 요소에서 생성할 콘텐츠를 설정합니다. Atomic CSS에서는 빈 콘텐츠(content: '') 클래스를 제공합니다.

클래스 목록

클래스CSS설명
contentEmptycontent: ''빈 콘텐츠. ::before/::after 의사 요소 활성화용

사용 예시

contentEmpty는 의사 요소 선택자(before-, after-)와 함께 사용합니다.

<!-- 장식용 의사 요소 (구분선 등) -->
<div class="before-contentEmpty before-db before-w100p before-h1px before-bgFFFFFF">
  구분선 위의 콘텐츠
</div>

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

<!-- 인디케이터 점 -->
<span class="before-contentEmpty before-dib before-w8px before-h8px before-br50p before-bg34D399 before-mr8px">
  온라인
</span>

팁 & 주의사항

content가 필수인 이유

::before와 ::after는 content 속성이 없으면 렌더링되지 않습니다. 장식용 의사 요소에는 반드시 빈 content를 설정해야 합니다.

접근성 주의

의사 요소의 content는 스크린리더에서 읽힐 수 있습니다. 장식 목적이라면 빈 문자열(contentEmpty)을 사용하세요.

displayvisibility