css 가상요소[Pseudo Element] before, after

가상요소 종류

::first-line

첫 번째 줄에 스타일 적용

 

::first-letter

첫 번째 글자에 스타일 적용

 

::before

콘텐츠 시작 부분에 추가

 

::after

콘텐츠 마지막 부분에 추가

 

::selection

사용자가 마우스 드래그로 선택한 영역에 스타일 적용

 

::placeholder

input 필드에 힌트 텍스트에 스타일 적용

 

 

::before, ::after

content 속성은 필수

 

<ul>
  <li>한국</li>
  <li>미국</li>
  <li>중국</li>
  <li>일본</li>
</ul>

<style>
  li {}
  li:before {content: "|"; padding-left: 5px}
  li:first-child:before {content: ""}
</style>

한국 | 미국 | 중국 | 일본