CSS 가상 요소 선택자 (::before, ::after) 사용법: 10분 완벽 마스터 가이드

CSS 가상 요소 중 ::before와 ::after, 이름은 많이 들어봤지만 헷갈리는 분들 아직도 꽤 계세요. 이 두 선택자는 HTML 구조를 건드리지 않고도 콘텐츠를 삽입하거나 꾸밀 수 있어서, 실무에서 자주 사용되는 CSS 핵심 기능이에요.

10분이면 완벽하게 마스터할 수 있도록 쉽고 구체적으로 정리해볼게요!

CSS 가상 요소 선택자 (::before, ::after) 사용법: 10분 완벽 마스터 가이드

::before와 ::after 차이점 핵심 요약

• ::before – 요소 내용 앞에 삽입
• ::after – 요소 내용 뒤에 삽입
• 내용 삽입 시 content 필수
• DOM에는 없고, CSS에서만 시각적으로 존재

가상 요소란 무엇인가요?

가상 요소는 실제 HTML 코드에는 없지만, CSS를 통해 마치 있는 것처럼 만들어지는 시각적 요소예요. 마우스로 선택도 가능하고, 애니메이션도 적용할 수 있어요. 하지만 개발자 도구(F12)를 열어 보면 HTML에는 보이지 않아요.

::before, ::after 차이점

둘 다 요소의 내용과 연관된 위치에 '가짜 요소'를 만들어주는 선택자예요.

• ::before는 실제 콘텐츠 앞에 붙어요
• ::after는 실제 콘텐츠 뒤에 붙어요

가상 요소는 언제 써요?

다양한 상황에서 유용하지만 특히 다음 작업에 자주 사용돼요.

• 문자나 아이콘 자동 삽입
• 화살표, 말풍선 등 UI 장식
• 라인이나 그림자 효과 만들기
• 선택적 꾸밈 효과 (ex. 첫글자 강조)

필수 속성: content

::before와 ::after는 단독으론 아무것도 보이지 않아요. 반드시 content 속성을 함께 써야 시각적으로 표현돼요.

기본 사용법 예제

p::before {
  content: '👉 ';
}

p::after {
  content: ' 🔍';
}

이렇게 하면 모든 <p> 요소 앞뒤에 아이콘이 자동으로 붙어요. HTML은 전혀 안 바꿨어도, 시각적으로는 텍스트가 추가된 것처럼 보여요.

빈 content도 가능할까요?

네, 가능합니다. content: "";로 설정하면, 내용 없이 스타일만 적용돼요. 이걸 이용해 라인, 점, 배경 효과 등을 만들 수 있어요.

before/after로 UI 꾸미기

실제 웹 UI에서 어떻게 활용되는지 예를 들어볼게요.

사각형 강조 효과

.highlight::before {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background: #f90;
}

이렇게 하면 해당 요소 위에 얇은 오렌지색 밑줄이 생겨요. 메뉴바 강조, 버튼 하이라이트에 자주 써요.

화살표 말풍선 만들기

.tooltip::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

툴팁 밑에 작은 삼각형 화살표를 넣는 코드예요. HTML은 그대로 두고 스타일만 조정 가능해서 유지보수도 편해요.

기본 속성 비교

before/after는 block 요소에도, inline 요소에도 사용할 수 있어요. 하지만 display 속성에 따라 결과가 달라지기 때문에 반드시 확인해봐야 해요.

속성	설명	필수 여부
content	삽입할 내용 또는 빈 문자열	필수
display	inline, block, flex 등 지정 가능	권장
position	absolute로 위치 지정 가능	선택
width/height	도형, 줄, 배경 등을 만들 때 사용	선택

::before와 ::after는 HTML 구조를 건드리지 않고도 시각적 효과를 낼 수 있어서, 유지보수성이나 디자인 효율성이 크게 향상돼요.

 

CSS white-space: div 줄바꿈 방지 완벽 가이드 7단계 (코드 포함)

CSS white-space: div 줄바꿈 방지 완벽 가이드 7단계 (코드 포함)

UI 실무 적용 예시

::before, ::after는 실무 CSS에서 거의 매일 쓰인다고 해도 과언이 아니에요. 다음 세 가지 예시는 특히 많이 활용되는 대표적인 패턴이에요.

예시 1. 버튼 앞에 아이콘 삽입

button::before {
  content: '🚀';
  margin-right: 8px;
}

HTML을 건드리지 않고도 버튼 안에 아이콘처럼 보이는 요소를 넣을 수 있어요. 폰트어썸 같은 아이콘 대신 이모지, 문자로 간단하게 대체 가능하죠.

예시 2. 카드 디자인에 장식 라인 추가

.card::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #ddd;
  margin-top: 10px;
}

디자인적으로 구분선을 넣고 싶은데 마크업을 늘리고 싶지 않을 때 매우 유용해요. 특히 반복되는 카드 UI에 많이 사용돼요.

예시 3. 텍스트 강조 마커

.highlight::before {
  content: "";
  background: yellow;
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: 0;
  left: 0;
  z-index: -1;
}

이렇게 하면 텍스트 아래에 형광펜으로 그은 듯한 강조 효과가 생겨요. 텍스트에 직접 배경색을 주는 것보다 훨씬 자연스럽죠.

 

백그라운드 누끼 따기, 유료 말고 5가지 무료 방법 (2025 최신)

백그라운드 누끼 따기, 유료 말고 5가지 무료 방법 (2025 최신)

가상 요소 사용 시 주의사항

의외로 많은 분들이 놓치는 몇 가지 주의 포인트도 있어요. 아래 실수를 피하면 적용이 훨씬 매끄러워져요.

1. content 생략

::before나 ::after를 썼는데 화면에 아무것도 안 보인다면, 10중 9는 content 속성을 빼먹은 거예요. 빈 문자열도 꼭 명시해야 돼요.

2. display 누락

의미 있는 도형이나 장식을 만들려면 block, inline-block 등 display 설정이 필요해요. 기본값인 inline만으론 원하는 스타일이 잘 안 나와요.

3. z-index 문제

텍스트 강조 효과를 줄 때, 가상 요소를 아래로 보내야 한다면 z-index: -1를 주고, 부모 요소에는 position: relative;를 꼭 추가해야 작동해요.

4. flex item에 적용 시 이상 동작

가상 요소가 있는 요소에 display: flex가 걸려 있다면 align-items나 justify-content 영향을 받아 위치가 이상해질 수 있어요. margin이나 absolute 포지션으로 조정해야 돼요.

FAQ 5가지

Q. ::before와 :before의 차이는 뭔가요?

::가 표준 문법이에요. :before는 옛날 CSS2 문법으로 현재도 작동하긴 하지만, CSS3 이후부터는 ::를 사용하는 게 권장돼요.

Q. 반드시 content가 있어야 하나요?

네, 있어야만 작동해요. 내용이 없더라도 content: ""를 반드시 명시해야 가상 요소가 화면에 그려져요.

Q. 자바스크립트로 접근 가능한가요?

DOM에는 존재하지 않는 요소이기 때문에 JavaScript로 직접 선택하거나 조작할 수는 없어요. 오직 CSS로만 컨트롤해요.

Q. 이미지도 삽입할 수 있나요?

네, background-image 속성을 통해 가상 요소에 이미지도 넣을 수 있어요. 대표적으로 말풍선 꼬리나 배지 UI 등에 자주 사용돼요.

Q. 여러 줄 텍스트에도 적용되나요?

가능하지만 주의가 필요해요. display: block이나 absolute 포지션을 써서 원하는 위치에 잘 배치해야 해요. 특히 줄 간격이 달라질 수 있어요.