의사 요소

Atomic CSS는 ::before와 ::after 의사 요소를 지원합니다. 주로 관계 선택자와 조합하여 장식적 요소, 아이콘, 뱃지, 오버레이 등을 만들 때 사용합니다.

지원 목록

키워드	CSS	설명
`before`	::before	요소 내부의 맨 앞에 가상 콘텐츠 생성
`after`	::after	요소 내부의 맨 뒤에 가상 콘텐츠 생성

동작 원리

의사 요소는 단독으로 사용하지 않습니다. 관계 선택자를 통해 특정 요소의 ::before 또는 ::after에 스타일을 적용하는 방식입니다.

핵심: 의사 요소가 화면에 나타나려면 반드시 content 속성이 필요합니다. Atomic CSS에서는 contentEmpty 클래스가 content: ''를 적용합니다.

구문 형식

의사 요소는 관계 선택자 구문 안에서 관계 키워드 자리에 위치합니다.

{트리거}-{의사클래스}-{before|after}-{클래스}

구성 요소	설명	예시
`트리거`	클래스가 적용되는 요소의 식별자	`badge`
`의사클래스`	상태 조건 (hover, focus 등)	`hover`
`before \| after`	의사 요소 키워드	`after`
`클래스`	적용할 Atomic CSS 클래스	`contentEmpty`

구문이 CSS로 변환되는 과정:

/* 클래스: badge-after-contentEmpty */
.badge::after { content: ''; }

/* 클래스: badge-after-pa */
.badge::after { position: absolute; }

/* 클래스: badge-after-w8px */
.badge::after { width: 8px; }

/* 클래스: link-hover-after-w100p */
.link:hover::after { width: 100%; }

실전 예시

뱃지 / 알림 점

::after를 사용하여 알림 뱃지를 만듭니다. 부모에 pr(position: relative)을 주고, 의사 요소를 pa(position: absolute)로 배치합니다.

<!-- 알림 뱃지 (빨간 점) -->
<button class="pr badge-after-contentEmpty badge-after-pa badge-after-t0 badge-after-r0 badge-after-w8px badge-after-h8px badge-after-br50p badge-after-bgEF4444 py8px px16px bg27272A cFAFAFA br8px bn cp">
  알림
</button>
<!-- CSS 결과:
  .badge::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: #EF4444;
  }
-->

장식 밑줄

::after로 커스텀 밑줄을 만듭니다. 일반 text-decoration보다 두께, 색상, 위치를 자유롭게 제어할 수 있습니다.

<!-- 커스텀 장식 밑줄 -->
<span class="pr dib heading-after-contentEmpty heading-after-pa heading-after-b0 heading-after-l0 heading-after-w100p heading-after-h3px heading-after-bg6366F1 heading-after-br4px pb8px">
  섹션 제목
</span>
<!-- CSS 결과:
  .heading::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 3px;
    background-color: #6366F1;
    border-radius: 4px;
  }
-->

인용부호

::before와 ::after를 모두 활용하여 인용부호를 장식합니다.

<!-- 인용부호 장식 -->
<blockquote class="pr pl4rem quote-before-contentEmpty quote-before-pa quote-before-t0 quote-before-l0 quote-before-w4px quote-before-h100p quote-before-bg6366F1 quote-before-br4px fs16px cA1A1AA lh1-8 fsi">
  좋은 디자인은 가능한 한 적게 디자인하는 것이다.
</blockquote>
<!-- CSS 결과:
  .quote::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background-color: #6366F1;
    border-radius: 4px;
  }
-->

필수 입력 표시 (asterisk)

폼 라벨 뒤에 ::after로 빨간 별표(*)를 추가하여 필수 항목임을 표시합니다.

<!-- 필수 항목 별표 -->
<label class="label-after-cEF4444 label-after-ml4px fs14px cFAFAFA">
  이메일 주소
</label>
<input type="email" class="w100p py8px px12px bg18181B b1pxsolid27272A br8px cFAFAFA mt4px" />
<!-- 참고: content에 텍스트(' *')를 넣는 것은 CSS에서 처리하며,
     Atomic CSS에서는 content 값 지정이 제한적입니다.
     이 패턴은 전역 CSS에서 content: ' *'를 정의하거나,
     실제 DOM에 <span class="cEF4444 ml4px">*</span>을 추가하는 방식을 권장합니다. -->

<!-- 실용적 대안: DOM 요소 사용 -->
<label class="df aic gap4px fs14px cFAFAFA">
  이메일 주소
  <span class="cEF4444">*</span>
</label>

Clearfix 패턴

float을 사용하는 레이아웃에서 부모가 자식을 감싸지 못하는 문제를 ::after로 해결합니다.

<!-- Clearfix: float 사용 시 부모 높이 확보 -->
<div class="clearfix-after-contentEmpty clearfix-after-db clearfix-after-clb">
  <div class="fl w50p p16px bg27272A">왼쪽</div>
  <div class="fl w50p p16px bg18181B">오른쪽</div>
</div>
<!-- CSS 결과:
  .clearfix::after {
    content: '';
    display: block;
    clear: both;
  }
-->

<!-- 참고: 현대 레이아웃에서는 df 또는 dg를 사용하면
     clearfix가 필요 없습니다. -->

hover와 조합

의사 클래스와 의사 요소를 함께 사용하면 호버 시에만 ::before 또는 ::after의 스타일을 변경할 수 있습니다.

{트리거}-hover-after-{클래스}

호버 시 밑줄이 나타나는 네비게이션 링크:

<!-- 호버 시 밑줄 애니메이션 -->
<a href="#" class="pr dib link-after-contentEmpty link-after-pa link-after-b0 link-after-l0 link-after-w0 link-after-h2px link-after-bg6366F1 link-hover-after-w100p link-after-tall200msease cFAFAFA tdn pb4px">
  네비게이션 링크
</a>
<!-- CSS 결과:
  .link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 2px;
    background-color: #6366F1;
    transition: all 200ms ease;
  }
  .link:hover::after {
    width: 100%;
  }
-->

호버 시 오버레이가 나타나는 카드:

<!-- 호버 시 오버레이 표시 -->
<div class="pr oh br8px card-after-contentEmpty card-after-pa card-after-t0 card-after-l0 card-after-w100p card-after-h100p card-after-bg0-0-0-0 card-hover-after-bg0-0-0-50 card-after-tall300msease">
  <img src="/image.jpg" class="w100p h100p ofc db" alt="카드 이미지" />
</div>
<!-- CSS 결과:
  .card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0);
    transition: all 300ms ease;
  }
  .card:hover::after {
    background-color: rgba(0,0,0,0.5);
  }
-->

팁 & 주의사항

content 속성 필수

의사 요소가 화면에 렌더링되려면 반드시 content 속성이 있어야 합니다. Atomic CSS에서는 contentEmpty 클래스(content: '')를 사용합니다.

DOM에 존재하지 않음

의사 요소는 실제 DOM 노드가 아닙니다. JavaScript로 선택하거나 이벤트를 바인딩할 수 없으며, 사용자가 텍스트를 선택(드래그)할 수도 없습니다.

장식 용도로만 사용

의사 요소는 장식적 요소(아이콘, 구분선, 배경 효과 등)에 적합합니다. 의미 있는 콘텐츠나 중요한 정보는 반드시 실제 DOM 요소에 배치하세요. 스크린리더가 의사 요소의 내용을 일관되게 읽지 못할 수 있습니다.

img, input, br 등에는 적용 불가

::before와 ::after는 요소 내부에 콘텐츠를 생성합니다. 따라서 img, input, br 같은 빈 요소(void element)에는 적용할 수 없습니다.

의사 클래스 관계 선택자 position display