AAtomic CSS

content

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
contentEmptycontent: ''빈 콘텐츠. ::before/::after 의사 요소 활성화용

사용 예시

contentEmpty는 의사 요소 선택자(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>

팁 & 주의사항

content가 필수인 이유

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

접근성 주의

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

displayvisibility