가상요소에 이미지 넣기

가상요소로 이미지를 넣는 방식에 대해 알아보자.

background-image

가상요소에 이미지를 넣기 위해서 background-image 속성에 url()로 svg 파일을 연결했다.

.more-link::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background: url(../images/icon-arrow.svg) no-repeat center / contain;
}

background-image에 넣는 url()은 사이즈 조절이 가능하다.

content url()

content 속성에도 url()을 넣으면 이미지가 표시 된다.

.more-link::after {
  content: url(../images/icon-arrow.svg);
  display: inline-block;
  width: 28px;
  height: 28px;
}

content 속성에 넣은 url()은 사이즈 조절이 되지 않는다.