::marker

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

::marker CSS 의사 요소는 일반적으로 불릿 혹은 숫자를 포함하는 목록 요소의 마커 상자를 선택합니다. 이는 <li><summary>처럼 display: list-item이 설정된 의사 요소나 일반 요소에서 동작합니다.

시도해보기

허용되는 속성

::marker 의사 요소는 다음을 포함한 한정적인 수의 CSS 속성을 지원합니다.

참고 : 추가적인 CSS 속성에 대한 명세서가 추후 지원될 수 있습니다.

구문

css
::marker {
  /* ... */
}

예제

HTML

html
<ul>
  <li>복숭아</li>
  <li>사과</li>
  <li>자두</li>
</ul>

CSS

css
ul li::marker {
  color: red;
  font-size: 1.5em;
}

결과

명세서

Specification
CSS Pseudo-Elements Module Level 4
# marker-pseudo

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::marker
Animation and transition support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support

같이 보기