CSS ::marker pseudo-element

정의와 사용법

CSS ::marker pseudo-element은 목록 항목 표시의 스타일을 설정하기 위해 사용됩니다。

이伪元素는 display: list-item로 설정된 모든 요소에 적용됩니다。

주의:다음 속성은 함께 사용할 수 있습니다. ::marker 함께 사용하면:

• 모든 글꼴 속성
• 모든 애니메이션 속성
• 모든 전환 속성
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• direction

실례

예제 1

모든 목록 항목 표시에 색상과 글자 크기를 설정합니다:

::marker {
  font-size: 20px;
  color: red;
}

자신의 손으로 시도해 보세요

예제 2

<ul> 목록의 목록 항목 표시에 내용, 색상 및 글자 크기를 설정합니다:

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

자신의 손으로 시도해 보세요

예제 3

<h2> 요소를 display: list-item로 설정하고, 목록 항목 표시에 내용과 색상을 설정합니다:

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

자신의 손으로 시도해 보세요

CSS 문법

::marker {
  css 선언;
}

기술 세부 사항

浏览器支持

표中的数字指定了完全支持该伪元素的首个浏览器版本。

관련 페이지

교육:CSS 가상 요소