Pseudo-elements

자바스크립트와 가상 클래스를 넘어, HTML 문서에 실제로 존재하지 않는 가상의 요소를 CSS로 직접 생성하여 스타일을 입히는 **CSS 가상 요소(Pseudo-elements)**에 대해 알아보겠습니다.

가상 클래스가 '상태'를 선택한다면, 가상 요소는 '특정 부분'을 선택하거나 '새로운 조각'을 만들어냅니다.

---

1. ::before와 ::after (가장 많이 쓰이는 가상 요소)

선택한 요소의 **내부 앞쪽(before)**이나 **내부 뒤쪽(after)**에 새로운 콘텐츠를 추가합니다.

• 특징: 반드시 content 속성이 있어야 화면에 나타납니다.
• 용도: 아이콘 추가, 꾸밈 요소(장식선), 단위 표시(예: '원', '%') 등을 HTML 수정 없이 넣을 때 사용합니다.

CSS

 

/* 링크 앞에 화살표 아이콘 넣기 */
a::before {
  content: "➔ ";
  color: blue;
}

/* 필수 입력 항목 뒤에 빨간 별표 넣기 */
.required::after {
  content: "*";
  color: red;
}

---

2. 글자 및 영역 선택 가상 요소

콘텐츠의 특정 부분만 골라서 스타일을 적용합니다.

• ::first-line: 요소의 첫 번째 줄만 선택합니다.
• ::first-letter: 요소의 첫 번째 글자만 선택합니다. (신문이나 잡지의 첫 글자 강조 효과)
• ::selection: 사용자가 마우스로 드래그하여 블록을 지정한 부분의 스타일을 바꿉니다.

CSS

 

/* 문단의 첫 글자를 크게 만들고 빨간색으로 변경 */
p::first-letter {
  font-size: 3em;
  color: red;
  float: left;
  margin-right: 5px;
}

/* 드래그했을 때 배경색과 글자색 변경 */
::selection {
  background-color: black;
  color: yellow;
}

---

3. ::placeholder (입력 힌트 스타일링)

input 태그의 placeholder 속성 텍스트에만 스타일을 적용합니다.

CSS

 

input::placeholder {
  color: lightgray;
  font-style: italic;
  text-align: right;
}

---

🖥️ 실전 예제 코드: "메뉴 구분선 만들기"

::after를 사용하여 메뉴 항목 사이에 세로선(|)을 넣는 실무 기법입니다.

HTML

 

<style>
  .menu-list { list-style: none; display: flex; }
  .menu-list li { margin-right: 10px; position: relative; }

  /* 마지막 항목을 제외한 모든 리스트 뒤에 세로선 추가 */
  .menu-list li:not(:last-child)::after {
    content: "|";
    margin-left: 10px;
    color: #ccc;
  }

  /* 호버 시 밑줄 애니메이션용 가상 요소 */
  .menu-list li:hover::before {
    content: "";
    position: absolute;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background-color: orange;
  }
</style>

<ul class="menu-list">
  <li>홈</li>
  <li>소개</li>
  <li>서비스</li>
  <li>문의</li>
</ul>

---

📋 가상 요소 vs 가상 클래스 한눈에 비교

구분	가상 클래스 (Pseudo-class)	가상 요소 (Pseudo-element)
기호	콜론 1개 (:)	콜론 2개 (::)
의미	특정 상태를 선택	특정 부분을 선택하거나 생성
예시	:hover, :nth-child	::before, ::after, ::selection
특징	실제로 존재하는 요소의 상태 변경	존재하지 않는 요소를 만들거나 부분 수정

---

학습 정리

• 가상 요소는 최신 표준에 따라 **콜론 2개(::)**를 사용하는 것이 정석입니다. (하위 호환성을 위해 1개도 작동하긴 합니다.)
• **::before**와 **::after**는 기본적으로 인라인(inline) 요소입니다. 크기를 조절하려면 display: block이나 inline-block으로 바꿔야 합니다.
• HTML 코드를 깨끗하게 유지하면서 디자인적인 요소를 넣고 싶을 때 가장 먼저 고려해야 할 도구입니다.

---

문서의 구조를 건드리지 않고도 화려한 장식을 더하는 가상 요소를 정복하셨습니다!

---