Pseudo-elements (의사 요소)

 

🟢 Pseudo-elements

HTML 문서에는 실제로 존재하지 않는 가상의 요소를 CSS로 생성하여 스타일을 적용하는 요소.

 

1️⃣ 내용 앞뒤에 콘텐츠를 추가하는 가상 요소

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

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

•  ::before: 선택한 요소의 내부 앞에 가상 요소 추가.
•  ::after: 선택한 요소의 내부 뒤에 가상 요소 추가.
  • 특징: 반드시 content 속성을 추가해 내용을 입력. ( 👉 이모티콘 삽입 단축키 (win + .))
  • 용도: 아이콘 추가, 꾸밈 요소(장식선), 단위 표시(예: '원', '%') 등을 HTML 수정 없이 넣을 때 사용.

 

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

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

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

• ::first-line: 요소의 첫 번째 줄 적용.
• ::first-letter: 요소의 첫 번째 글자 적용. (신문이나 잡지의 첫 글자 강조 효과)
• ::selection: 사용자가 마우스로 드래그(선택)된 영역 적용.

 

3️⃣ 그 외

input::placeholder {
  color: gray;
}

• ::placeholder: input 태그의 placeholder 속성 텍스트에만 스타일 적용. (입력 힌트 스타일링)

 

li::marker {
  color: red;
}

• ::marker: 리스트 앞 점 스타일 적용.

 

---

 

🔥  가상 요소 위치조절 position 🔥

.card {
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}
/* 오버레이 효과 만들 때 자주 사용 */

 

https://yo-u-loo.tistory.com/35

CSS의 Position 속성

 

---

 

📍  POINT 📍 

✔️ 가상 요소는 콜론 2개(::)를 사용하여 작성한다. ✔️

✔️ ::before 와 ::after 는 기본적으로 인라인(inline) 요소로, 크기를 조절하려면 display: block이나 inline-block으로 바꿔야 한다. ✔️

✔️ HTML 코드를 깨끗하게 유지하면서 디자인적인 요소를 넣고 싶을 때 사용하면 좋다. ✔️

 

 

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

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

 

---

 

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

<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>