::marker 꾸미기

::marker

• pseudo-element(가상 선택자) 이다. ::before과 content 앞에 위치한다.

• css에서 컨트롤할 수 있는 ::marker 속성들은 다음과 같다.
  animation-*
  transition-*
  color
  direction
  font-*
  content
  unicode-bidi
  white-space

• 일반적으로 li가 list의 html 요소이지만, display: list-item을 사용해 다른 html요소에도 ::marker를 사용할 수 있다

• ::marker에 dot이 아닌 다른 것을 주고 싶다면 content속성을 활용하면 된다. emoji로 변경도 가능하다.

  li::marker {
  content: "😍";
  }

  
  
  출처: Custom bullets with CSS ::marker