본문 바로가기
카테고리 없음

[CSS 기초] ::before와 ::after 가상 요소 쉽게 이해하기

by 오디와이 2025. 4. 23.

웹페이지를 꾸미다 보면 콘텐츠 앞이나 뒤에 아이콘, 장식, 텍스트를 추가하고 싶을 때가 있습니다.
이럴 때 HTML 구조를 수정하지 않고도 디자인 요소를 더할 수 있는 방법이 바로 CSS 가상 요소입니다.

오늘은 그중 ::before와 ::after 가상 요소의 개념과 활용법을 알아보겠습니다.

가상 요소란?

가상 요소는 실제 HTML에는 존재하지 않지만, CSS를 통해 추가로 요소처럼 생성되는 부분입니다.
::before는 요소의 시작 부분에, ::after는 끝 부분에 콘텐츠를 추가할 수 있습니다.

::before / ::after 기본 문법

선택자::before {
  content: '내용';
  /* 추가 스타일 */
}

선택자::after {
  content: '내용';
  /* 추가 스타일 */
}

※ content 속성은 반드시 있어야 가상 요소가 생성됩니다!

예제 1: 문장 앞에 아이콘 붙이기

<p class="info">로그인이 필요합니다.</p>

.info::before {
  content: "🔒 ";
  color: red;
}

결과: 🔒 로그인이 필요합니다.

예제 2: 제목 아래 강조선 넣기

<h2 class="title">공지사항</h2>

.title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: orange;
  margin-top: 5px;
}

결과: 제목 아래에 주황색 밑줄이 생성됩니다.

예제 3: hover 효과로 밑줄 애니메이션

<a href="#" class="button">버튼</a>

.button::after {
  content: "";
  display: block;
  height: 3px;
  background: royalblue;
  transition: width 0.3s;
  width: 0;
}

.button:hover::after {
  width: 100%;
}

결과: 버튼에 마우스를 올리면 자연스럽게 밑줄이 생깁니다.

::before vs ::after 차이

가상 요소 역할
::before 요소 콘텐츠 앞에 추가
::after 요소 콘텐츠 뒤에 추가

사용 시 주의사항

  • content 속성 필수
  • inline 요소에 사용할 경우 display: inline-block 또는 block 설정 필요
  • 가상 요소는 시각적으로만 추가되며 검색엔진과 스크린리더에는 인식되지 않음

정리

  • ::before / ::after로 콘텐츠 앞뒤에 꾸밈 요소 추가 가능
  • HTML을 수정하지 않고 디자인 효과 구현
  • 아이콘, 밑줄, 효과 등 장식용으로 자주 활용
  • 웹 디자인과 유지보수에 매우 유용한 필수 CSS 문법

가상 요소 쉽게 설명한 이미지

[CSS 기초] ::before와 ::after 가상 요소 쉽게 이해하기

관련 글 추천

마치며

지금부터 CSS 가상 요소를 활용해 더 세련된 웹 디자인에 도전해보세요!
더 많은 웹 개발 꿀팁과 입문자용 강의를 계속 업데이트할 예정이니 구독과 즐겨찾기도 부탁드립니다 😊

티스토리툴바