위와 같이 컨테이너 사이의 이미지 또는 텍스트를 CSS의 ::before 가상요소 선택자로 만드는 방법을 안내하겠습니다.

::before 가상요소 선택자

.box {
  position: relative;
}

.box::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12%;
  transform: translate(0, -50%);
  width: 20px; 
  height: 20px;
  background-image: url("주소"); 
  background-size: contain;
  background-position: center;
}

이미지, 아이콘, 텍스트를 가상요소 선택자를 활용하여 자유자재로 삽입할 수 있습니다.