::marker: 리스트 앞에 붙는 작은 점(불릿) 제어

728x90

::marker

-ol, ul, li 태그 앞에 붙는 작은 점을 불릿 또는 마커라고 함

-::before나 ::after 로도 만들 수는 있으나 굳이 그럴 필요는 없음

-마커는 스타일로 지정할 수 있음 (list-style)

-::marker는 기존 list-style보다 더 많은 불릿 커스텀이 가능함

-슈도엘레멘트라서 따로 html 태그가 필요없음

참고

developer.mozilla.org/en-US/docs/Web/CSS/::marker

::marker - CSS: Cascading Style Sheets | MDN

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the and elements. ::marker { color: blue; font-size: 1.2em; } P

developer.mozilla.org

css-tricks.com/almanac/selectors/m/marker/

::marker | CSS-Tricks

The ::marker pseudo-element is for applying list-style attributes on a given element. It effectively targets the bullet-point or number generated by a

css-tricks.com

web.dev/css-marker-pseudo-element/

Custom bullets with CSS ::marker

It is now trivial to customize the color, size or type of number or bullet when using a

web.dev