범위를 사용하지 않고 HTML에서 목록 글머리 기호 색상을 어떻게 변경할 수 있습니까?

범위 없이 목록 글머리 기호 색상 변경

HTML에서는 목록 글머리 기호 색상을 사용자 정의하는 것이 어려울 수 있습니다. 목록 항목을 범위로 묶는 것이 가능하지만 특정 시나리오에서는 이것이 옵션이 아닐 수도 있습니다. 이 질문은 추가 마크업을 추가하지 않고 글머리 기호 색상을 수정하는 솔루션을 모색합니다.

이를 달성하기 위해 대답은 CSS의 li:before 의사 요소를 활용합니다. li 요소에 대해 list-style: none을 설정하면 기본 글머리 기호가 제거됩니다. 그런 다음 li:before 요소는 유니코드 문자를 지정하기 위해 content 속성을 사용하여 사용자 정의 글머리 기호를 표시하는 데 사용됩니다. 색상 속성은 원하는 글머리 기호 색상을 설정합니다.

CSS 코드는 다음과 같습니다.

li {
  list-style: none;
}

li:before {
  content: '22'; /* For a round bullet */
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

이 솔루션을 사용하려면 다음과 같이 CSS 스타일을 목록에 적용하면 됩니다.

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

이 기술을 사용하면 목록 항목 내용을 수정하거나 추가 마크업을 추가하지 않고도 글머리 기호 색상을 변경할 수 있어 HTML을 사용자 정의하는 유연한 방법을 제공합니다. 목록입니다.

위 내용은 범위를 사용하지 않고 HTML에서 목록 글머리 기호 색상을 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!