:: Pseudo-element

:: Pseudo-element 의 사용

:hover, :focus, :active 등 Pseudo-class 는 해당 요소가 '다른 상태일때' 다른 스타일을 적용할 때 사용

::first-letter, ::first-line ,::after,::before등 Pseudo-element는 해당 요소의 '일부분' 에 다른 스타일을 적용할 때 사용

 

변하는 데이터가 들어있는 요소에서 첫 번째 글자만 스타일링 해야하는 경우, 

자바스크립트를 사용하지 않아도 된다.

::after 는 내부의 맨 뒤에 뭔가를 추가할때 사용

 

 

예 )  clear : both 박스 

float:left 적용한 박스 아래에 clear: both라고 적힌 빈 div 박스를 만들어 줄 때

(다른 기능없이 clear:both 기능만 하는 div박스를 html로 만드는 대신)

pseudo-element로 대체할 수 있다.

.box::after {
  content : '';
  display : block;
  clear : both;
}