CSS 가상요소 before과 after

가상요소

요소의 특정한 부분을 꾸며줄 때 사용함
실제로 어떤 요소의 앞이나 뒤에 다른 요소가 있는 것은 아니지만 있는 것처럼 CSS 속성을 사용할 수 있음

before after

before나 after도 가상 요소 종류인데
before같은 경우 해당 요소의 앞에, after 같은 경우 해당 요소의 뒤에 속성을 부여할 수 있음
이 외에도 selection, marker, first-letter, first-line등 다양한 가상 요소가 존재함

사용하는 이유

가상 요소를 사용하면 함수를 추가하거나 불필요한 요소를 추가할 필요 없이 요소를 꾸며줄 수 있기 때문에 편리함

예시

<ul>
	<li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
</ul>

<style>
  li::before {
      content: "before로 이렇게 꾸며줄 수 있다! : ";
  }
</style>

결과물:

reference

https://blogpack.tistory.com/1025