두 개의 콜론:: 으로 표현, 요소의 특정한 부분에 존재하며 정해진 기능을 하는 가상 요소를 선택

가상 요소 선택자

before & after

• content 속성과 함께 사용하여 컨텐츠 추가가 가능하다.
• ::before

  .example1 h2::before {
  	content: "※";
  }

  • 요소의 앞(before)에 다른 요소나 스타일을 추가
• ::after

  .example2 h2::after {
  	content: "!!";
  }

  • 요소의 뒤(after)에 다른 요소나 스타일을 추가
• 이 밖에도 여러 스타일 요소들이 있다.

  .example1 h2::after { // 이미지 삽입, 크기는 자동으로 작아짐
  	content: url(https://blah.blah/);
  }
  .example1 h2::after { // 동적 요소 삽입, 자신의 속성에서 data 속성을 찾아 값을 표시
    content: attr(data);
  }

::marker

.example3 li::marker {
	color: red;
}

• 목록(리스트) 앞에 붙는 마커를 선택

::placeholder

.example4 input::placeholder {
	text-align: center;
	color: darkgray;
	font-weight: bold;
}

• 입력(input) 태그의 placeholder을 선택

first-letter & first-line

• 문단의 특정 부분을 강조하기 위해 사용된다.
• ::first-letter

  .example5 h2::first-letter {
  	color: red;
  }

  • 문단의 첫 번째 글자를 선택한다.
• ::first-line

  .example6 h2::first-line {
  	color: red;
  }

  • 문단의 첫 번째 줄을 선택한다.
  • 첫 줄은 브라우저의 크기 변화에 따라 유동적으로 변한다.