css - 선택자(가상요소)

선택자(가상요소)

가상요소 선택자 사용시, content는 비우는 한이 있더라도 꼭 ""라도 입력하자.
즉, before/after는 content랑 한 세트라고 보면 됨

Before

• 선택자의 내부 앞에 내용(Content)을 삽입.
  ex)아래의 경우, div 뒤에 "앞!"이 붙어서 출력 됨.

• Before는 인라인(글자)요소

  앞! Content

<div class = "box">
  
  Content
  
</div>

.box::before {
	content: "앞"
}

---

after

• before와 같은 매커니즘이지만, 요소의 내부 뒤에 삽입됨