01682025년 6월 4일

CSS 가상 요소(Pseudo-element), 어렵지 않다

웹 개발을 하다 보면 가끔 HTML 구조를 바꾸지 않고도, 특정 요소에 스타일을 더하거나 장식을 추가하고 싶은 순간이 있다. 예를 들어, 리스트 아이템 앞에 꾸밈용 아이콘을 넣고 싶거나, 버튼에 강조 선을 추가하고 싶을 때가 그렇다. 이럴 때 유용하게 쓸 수 있는 것이 바로 CSS 가상 요소(Pseudo-element) 이다.

가상 요소는 실제 HTML 태그에는 존재하지 않지만, CSS로만 만들어지는 보이지 않는 "추가 요소" 라고 생각하면 된다.

대표적인 가상 요소는 다음과 같다.

::before
::after

이 두 가지는 각각 요소의 앞과 뒤에 가상의 박스를 만들어주는 역할을 한다.

::before와 ::after는 어떻게 생겼는가?

가상 요소는 아래처럼 선택자 뒤에 ::before 또는 ::after를 붙여서 정의한다.

CSS

.element::before {
  content: "?";
  display: inline-block;
  margin-right: 8px;
}

.element::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: blue;
}

이 코드는 .element 클래스가 있는 요소의 앞에 이모티콘을 추가하고, 뒤에는 파란색 밑줄을 그려주는 예제이다.

중요한 점은 ::before와 ::after 모두 content 속성이 필수라는 것이다.

내용이 없더라도 content: ""처럼 명시해주어야 한다. 그렇지 않으면 브라우저가 해당 요소를 그리지 않는다.

어떤 상황에서 사용할 수 있을까?

다음은 가상 요소가 자주 사용되는 예시들이다.

메뉴나 버튼 하단에 동적인 밑줄 효과 넣기
리스트 앞에 꾸밈용 아이콘 넣기
카드 컴포넌트의 테두리 강조선
알림 배지 표시
인용문에 큰 따옴표 디자인 삽입

예를 들어, 아래는 버튼에 ::after를 이용해 밑줄 애니메이션을 넣는 간단한 예제이다.

CSS

.button {
  position: relative;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
}

.button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: royalblue;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.button:hover::after {
  transform: scaleX(1);
}

실행 결과

이 스타일을 적용하면 버튼에 마우스를 올렸을 때 밑줄이 가운데에서 좌우로 퍼지는 애니메이션이 생긴다.

이는 실제 DOM에 선을 그리지 않고, CSS만으로 이루어졌기 때문에 마크업은 깔끔하게 유지된다.

::before와 ::after는 진짜 DOM인가?

정확히 말하면 아니다. 이들은 HTML에서 실제 존재하는 DOM 요소는 아니다.

개발자 도구에서 확인해 보면 해당 요소 하단에 가상의 박스로 렌더링되는 것을 볼 수 있지만, JavaScript로 직접 접근하거나 이벤트를 바인딩할 수는 없다. 오직 CSS 스타일링을 위해 만들어진 시각적인 도구라고 보는 것이 맞다.

주의할 점

반드시 content 속성을 설정해야 한다.
부모 요소는 position: relative로 지정해주어야 absolute 위치가 제대로 작동한다.
가상 요소는 CSS에서만 존재하며, JavaScript로는 직접 조작할 수 없다.

마무리

::before와 ::after는 CSS에서 시각적 표현을 유연하게 만들어주는 매우 강력한 도구이다. 이들은 별도의 HTML 요소 없이도, 다양한 장식이나 효과를 줄 수 있으며, 특히 인터랙티브한 UI를 구현할 때 효과적이다.

예를 들어 애니메이션 밑줄, 강조 박스, 장식용 아이콘 등은 모두 가상 요소만으로 충분히 표현할 수 있다. 가상 요소를 능숙하게 다루게 되면 마크업을 깔끔하게 유지하면서도 스타일링의 자유도는 훨씬 넓어지게 된다.

styled-components와 함께 사용할 때도 매우 잘 어울리기 때문에, React 프로젝트에서도 적극적으로 활용할 수 있다. CSS의 기본이지만, UI 디테일을 완성하는 데 반드시 필요한 개념이라 할 수 있다

최근 글