📝 CSS ::before와 ::after: HTML 건드리지 않고 콘텐츠 추가하기 ✨

HTML 코드를 수정하지 않고도 요소의 앞뒤에 콘텐츠를 추가할 수 있습니다.
장식, 아이콘, UI 효과까지 — ::before와 ::after의 모든 것을 정리합니다!

---

1. ::before · ::after란? 💡

CSS 가상 요소(Pseudo-element) 입니다.
HTML에 실제 태그를 추가하지 않고, CSS만으로 요소의 앞(::before) 또는 뒤(::after) 에 가상의 콘텐츠를 삽입합니다.

.box::before {
  content: "앞에 삽입";
}

.box::after {
  content: "뒤에 삽입";
}

🔍 구조 한눈에 보기

[::before 가상 요소] [실제 요소 내용] [::after 가상 요소]

💡 ::before와 ::after는 실제 DOM에 존재하지 않습니다.
눈에는 보이지만 HTML 구조에는 없는 가상의 요소입니다!

---

2. 반드시 알아야 할 규칙 ⚠️

✅ content 속성은 필수

::before, ::after는 content 속성이 없으면 동작하지 않습니다.
내용이 없어도 빈 문자열이라도 반드시 써야 합니다.

/* ❌ content 없으면 동작 안 함 */
.box::before {
  background-color: red;
  width: 10px;
  height: 10px;
}

/* ✅ 빈 문자열이라도 반드시 작성 */
.box::before {
  content: "";  /* 필수! */
  background-color: red;
  width: 10px;
  height: 10px;
  display: block;
}

✅ 기본값은 inline

::before, ::after의 기본 display 값은 inline입니다.
width, height를 지정하려면 반드시 display: block 또는 display: inline-block으로 바꿔야 합니다.

.box::before {
  content: "";
  display: block;       /* width, height 사용하려면 필수 */
  width: 20px;
  height: 20px;
}

---

3. 기본 예제

📝 텍스트 앞뒤에 장식 추가

<p class="title">중요한 내용</p>

.title::before {
  content: "⭐ ";  /* 별 이모티콘을 앞에 */
}

.title::after {
  content: " ⭐";  /* 별 이모티콘을 뒤에 */
}

결과: ⭐ 중요한 내용 ⭐

📝 따옴표 자동 삽입

<blockquote class="quote">명언이 여기 들어갑니다.</blockquote>

.quote::before {
  content: "\201C";  /* " 여는 따옴표 */
  font-size: 2em;
  color: #999;
}

.quote::after {
  content: "\201D";  /* " 닫는 따옴표 */
  font-size: 2em;
  color: #999;
}

결과: "명언이 여기 들어갑니다."

---

4. 실전 활용 예제 🎨

📝 필수 입력 항목 별표(*) 표시

HTML을 건드리지 않고 CSS만으로 필수 항목 표시를 추가합니다.

<label class="required">이름</label>
<label class="required">이메일</label>

.required::after {
  content: " *";
  color: red;
  font-weight: bold;
}

결과:
이름 *
이메일 *

📝 체크리스트 스타일

<ul class="checklist">
  <li class="done">HTML 공부하기</li>
  <li class="done">CSS 공부하기</li>
  <li>JavaScript 공부하기</li>
</ul>

.checklist li::before {
  content: "☐ ";  /* 기본: 빈 체크박스 */
}

.checklist li.done::before {
  content: "☑ ";  /* 완료: 체크된 박스 */
  color: green;
}

결과:
☑ HTML 공부하기
☑ CSS 공부하기
☐ JavaScript 공부하기

---

7. 📖 핵심 요약

포인트	내용
🔮 정체	HTML 건드리지 않고 요소 앞뒤에 가상 콘텐츠 삽입
⚠️ content 필수	없으면 동작 안 함, 빈 문자열("")이라도 작성
📐 기본 display	inline — width/height 쓰려면 block으로 변경
🎨 주요 활용	장식 문자, 구분선, 툴팁, 필수 항목 표시, 체크리스트