::before

선택한 요소 앞에 가상 콘텐츠 삽입

::after

선택한 요소 뒤에 가상 콘텐츠 삽입

content

before와 after를 쓸 때 같이 사용하는 익명 대체 요소로, HTML에는 존재하지 않고 CSS에만 존재하는 가짜 요소이다. 따라서 javascript로 제어하기는 어렵다.

  &:before,
  &:after {
    content: "";
    position: absolute;
  }