CSS 가상 요소(::before, ::after) 완벽 정리

웹 퍼블리싱을 하다 보면 자주 마주치는 ::before, ::after.
이 글에서는 가상 요소의 개념, 사용법, 필수 속성 content, 그리고 실무 예제를 통해 정리해본다.

---

가상 요소란?

HTML 요소의 앞(before)이나 뒤(after)에 생성되는 "가짜 요소"

• 실제 DOM에는 존재하지 않지만, CSS로 스타일을 줄 수 있음
• 주로 시각적인 장식(아이콘, 선, 배경 등)에 사용
• 요소에 영향을 주지 않고도 디자인을 덧붙일 수 있음

---

문법

selector::before {
  content: "";
  /* 스타일 속성 */
}

selector::after {
  content: "";
  /* 스타일 속성 */
}

• selector: 적용할 대상 선택자
• ::before: 시작 태그 바로 뒤에 생성
• ::after: 종료 태그 바로 앞에 생성
• content: 가상 요소가 렌더링되기 위한 필수 속성

---

왜 content가 꼭 필요할까?

가상 요소는 content 속성이 있어야 생성됨.

/* 생성되지 않음 */
.selector::after {
  width: 100px;
  height: 2px;
}

/* 생성됨 */
.selector::after {
  content: "";
  display: block;
  width: 100px;
  height: 2px;
}

content: ""처럼 빈 문자열이라도 반드시 선언해야 가상 요소가 나타난다.

---

자주 사용하는 예제

밑줄 애니메이션

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: black;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

• ::after로 밑줄을 만들고, hover 시에 애니메이션
• position: absolute를 쓰기 때문에 .nav-link에는 position: relative 필요

---

before vs after 차이

구분	위치	사용 예시
::before	태그 시작 위치에 삽입	작은 아이콘, 장식, 인용 부호 등
::after	태그 끝 위치에 삽입	밑줄, 강조선, 라벨 등

---

실무 팁

• HTML 수정 없이 디자인을 덧붙여야 할 때 유용함
• display: block이나 inline-block으로 가상 요소의 크기 설정
• position: absolute와 함께 많이 쓰임
• 애니메이션, 호버 효과, 강조 등에 적절히 활용 가능

---

요약

• ::before, ::after는 시각적인 장식용 가상 요소
• content는 필수
• DOM에 존재하지 않지만 CSS로 조작 가능
• 실무에서 매우 자주 사용되는 고급 퍼블리싱 기법