1, Before : 선택자 요소의 내부 앞에 내용(Content)을 삽입

가상의 인라인 요소를 만들어서 내부 내용 앞에 넣어준다 EX) ABC::before

<div class="box">Content!</div>

우선 box라는 이름을 가진 클래스를 만들어주고

내부에 Content!라는 텍스트를 넣어준다

.box::before {
  content: "앞!";
}

이후 box.css

즉 Css 파일로 넘어가서 스타일을 지정해주는데

이 때 저 content는 before 가상 요소 선택자를 사용할 때 필수적으로 같이 사용해야한다!!!!

이렇게 우리가 기본적으로 만들어준 Content라는 텍스트의 바로 앞에

앞! 이라는 텍스트가 생성된 것을 볼 수 있다!!