HTML/CSS - 가상 요소 선택자

안녕하세요, 오늘은 가상 요소 선택자에 대해 정리해보겠습니다.

 

가상 요소 선택자로는 before/after가 있으며 :: 를 붙여 만들 수 있습니다.

 

◆ before : 요소 내부의 앞에 내용을 삽입

li 안에 "숫자"를 삽입

 

여기서 before로 붙인 텍스트들에 효과도 줄 수 있습니다.

여기서 가장 중요한 것은 content라는 속성이 무조건 있어야 합니다!

 

◆ after : 요소 내부의 뒤에 내용을 삽입