가상요소 ::before ::after

가상요소의 정의

별도의 클래스를 지정하지 않아도 지정한 것 처럼 요소를 선택할 수 있다.
가상클래스처럼 선택자에 추가되며, 존재하지 않는 요소를 존재하는 것 처럼 부여하여 문서의 특정 부분 선택이 가능하다.
가상 요소는 컨텐츠의 앞뒤에 기호,도형,수식어 등을 사용하여 콘텐츠를 장식할 때 사용한다.

요소	소개
::before	요소의 콘텐츠 시작부분에 생성된 콘텐츠를 추가
::after	요소의 콘텐츠 끝부분에 생성된 콘텐츠 추가

::before ::after는 content의 속성이 필수!

content=""의미

::before ::after와 함께 쓰이는 가짜속성
HTML문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜줌

속성	사용
normal	표시되지 않는 기본값
string	문자열 생성
image	이미지나 비디오를 불러올 수 있음. 크기 조절 불가
counter	순서를 매길 수 있음
none	표시하지 읂음
attr	해당 속성값 표시