::after

"::after"는 CSS의 가상 요소 중 하나로, 선택한 요소의 내용 뒤에 생성되는 가상 요소를 나타냅니다. 이 가상 요소를 사용하여 요소에 추가적인 스타일이나 콘텐츠를 추가할 수 있습니다.

"::after" 가상 요소는 content 속성을 사용하여 내용을 정의하고, display 속성을 통해 요소의 표시 방법을 설정할 수 있습니다. 일반적으로 콘텐츠를 텍스트 또는 아이콘으로 설정하고, display를 inline 또는 block으로 설정하여 가상 요소의 레이아웃을 결정합니다.

예를 들어, 다음과 같은 CSS 코드를 사용하여 "::after" 가상 요소를 생성하고 아이콘을 나타낼 수 있습니다:

 

.my-element::after {
  content: "";
  display: inline-block;
  background-image: url("icon.png");
  width: 16px;
  height: 16px;
}

위의 코드에서는 ".my-element"라는 클래스를 가진 요소의 뒤에 "::after" 가상 요소를 생성하고, content 속성을 비워둠으로써 아이콘을 설정하고 있습니다. background-image 속성을 사용하여 아이콘의 이미지 파일을 지정하고, width와 height 속성으로 아이콘의 크기를 설정합니다.

이렇게 작성된 CSS 코드를 사용하면, 해당 요소의 뒤에 아이콘이 표시될 것입니다. 실제로는 내용을 가진 요소의 뒤에 아이콘을 추가하거나, 아이콘 요소에 "::after" 가상 요소를 사용하는 등 다양한 방식으로 활용할 수 있습니다.