CSS에서 pseudo-element::marker의 기능은 무엇입니까?

CSS에서 pseudo-element::marker의 역할은 무엇인가요? 구체적인 코드 예제가 필요합니다

CSS에서 pseudo-element::marker의 역할은 목록 항목의 표시 부분에 대한 스타일을 설정하는 것입니다. 일반 HTML 목록에서 마크업 부분은 목록 항목 앞의 글머리 기호, 번호 또는 사용자 정의 스타일을 나타냅니다. ::marker 의사 요소를 사용하면 목록 항목의 표시된 부분의 모양을 사용자 정의할 수 있어 웹 페이지의 시각적 효과를 향상시킬 수 있습니다.

다음은 ::marker 의사 요소의 특정 적용을 보여주기 위해 일반적으로 사용되는 몇 가지 코드 예입니다.

1. 맞춤형 정렬되지 않은 목록 표시 스타일:

ul {
  list-style-type: none;
}

li::marker {
  content: "★";
  color: red;
  font-weight: bold;
}

위 코드에서는 먼저 정렬되지 않은 목록의 기본 표시를 변경합니다. list 스타일을 취소하려면 list-style-type을 none으로 설정합니다. 다음으로, ::marker 의사 요소를 사용하여 목록 항목의 마커 부분 스타일을 지정합니다. 이 예에서는 마크 내용을 ★로, 색상을 빨간색으로, 글꼴 두께를 굵게 설정했습니다.

2. 맞춤형 순서 목록 표시 스타일:

ol {
  list-style-type: none;
}

li::marker {
  content: counter(li);
  color: blue;
  font-size: 20px;
  margin-right: 10px;
}

위 코드에서는 순서 목록의 기본 표시 스타일도 취소합니다. 그런 다음 ::marker 의사 요소를 사용하여 목록 항목의 마커 부분 스타일을 지정합니다. 이 예에서는 counter(li)를 사용하여 마커 내용을 목록 항목의 개수 값으로 설정합니다. 또한 마커 색상을 파란색으로, 글꼴 크기를 20픽셀로, 마커 부분의 오른쪽 여백을 10픽셀로 설정했습니다.

::marker 의사 요소는 목록 항목(예: li 요소)에만 적용할 수 있으며 단락(p 요소) 또는 제목(h1-h6 요소)과 같은 다른 유형의 요소에는 적용할 수 없습니다. ), 등.

요약:
CSS의 의사 요소 ::marker를 사용하면 목록 항목의 표시 부분 스타일을 사용자 정의할 수 있습니다. ::marker 의사 요소의 관련 속성을 설정하면 마크의 내용, 색상, 글꼴 스타일 등을 변경할 수 있어 웹 페이지의 시각적 효과를 높일 수 있습니다. 위의 예제 코드는 ::marker 의사 요소를 더 잘 이해하고 사용하는 데 도움이 될 수 있습니다.

위 내용은 CSS에서 pseudo-element::marker의 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!