::before ::after content에 대해

1. ::before, ::after 의 차이점

::before - 선택한 element(s) 앞에 가상 콘텐츠 삽입 

::after - 선택한 element(s)s 뒤에 가상 콘텐츠 삽입 

2. content를 쓰는 이유

가상 요소 before/after를 사용할 때 꼭 같이 사용하는 속성이 content입니다.

content ="" ;

HTML에는 존재하지 않고 CSS에서만 존재하는 가상(가짜) 덩어리입니다.

가상 요소이기 때문에 javascript로 제어하기 어려워요.

 

content 값에 텍스트(특수문자 포함), 이미지 등을 넣어 CSS만으로 가상 요소를 추가할 수 있습니다.

https://webroadcast.tistory.com/m/4

::before ::after content에 대해 쌉 이해 가능