선택자(4)_가상 요소 선택자

• 가상클래스와는 다르게 css를 통해 html에 가상의 요소를 생성하여 사용

• ::를 사용함
  
  

• 간혹 : 도 있음 → 예전 방식
  ( before / after 앞에 : 있다면 가상요소 선택자이니 헷갈리지 말 것! )
  
  

---

before

• ::before - 요소 내부의 앞쪽에 내용을 가상의 요소로 삽입

• content 속성 필수
  
  

🤦‍♂️ <li>태그가 100개 있다고 할 때,
      모든 요소에 특정 내용을 추가해야 한다면..? ( 암담,,😱 )

html

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
         ...
      <li>100</li>
  </ul>

css

  ul li::before {
      content: "no.";       /* content 속성 필수!! */
      font-weight: bold;
  }

---

after

• ::after - 요소 내부의 뒤쪽에 내용을 삽입

• content 속성 필수
  
  

• 이미지도 삽입이 가능함

  ul li::after {
      content: url("");
  }