[ CSS ] 가상 요소(::before, ::after)를 써서 얻을 수 있는 이득은 무엇일까?

 

  css의 가상요소 ::before, ::after은 실제 컨텐츠의 앞 혹은 뒤에 HTML 마크업 조작없이 컨텐츠를 삽입할 수 있도록 해줍니다. 아이콘, 테두리, 배경을 비롯해 텍스트까지 삽입 가능하며 스타일에 관한 요소를 실제 html 구조에 영향을 미치지 않고 조작할 수 있도록 해줍니다. 또한, 코드의 중복을 줄여주어 특정 효과를 구현하는데 필요한 코드 양을 줄여줄 수 있습니다. 즉, 더 적은 코드로 보다 시각적으로 매력적인 사이트를 만들 수 있게 해줍니다.