목록 항목 내용에 영향을 주지 않고 목록 글머리 기호 색상을 어떻게 변경할 수 있습니까?

목록 항목을 수정하지 않고 목록 글머리 기호 색상 사용자 정의

HTML 목록 스타일 영역에서는 목록 글머리 기호의 모양을 변경하는 것이 바람직한 경우가 많습니다. . 일부는 "span" 또는 "p" 태그 내에 글머리 기호 텍스트를 캡슐화하는 방법을 사용하지만 이러한 수정은 제한적일 수 있습니다. 이는 질문을 제기합니다. 목록 항목 자체에 영향을 주지 않고 글머리 기호 색상을 변환할 수 있습니까?

다행히도 이를 달성하기 위해 CSS의 "li:before"를 활용하는 영리한 기술이 있습니다.

li {
  list-style: none;
}

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

이 접근 방식에는 여러 가지 장점이 있습니다.

• 목록 항목 유지 콘텐츠: 목록 항목 내의 텍스트는 그대로 유지됩니다.
• 광범위한 브라우저 지원: IE8, Firefox, Chrome을 포함한 주요 브라우저에서 작동합니다.
• 유니코드 글머리 기호 사용자 정의: 유니코드를 기반으로 다양한 글머리 기호 스타일을 허용합니다.

예를 들어 녹색 사각형 글머리 기호를 만들려면 '2022'를 '25A0'으로 바꾸세요. 이 접근 방식에는 이전 버전의 Internet Explorer와 호환되지 않는 등의 제한 사항이 있습니다. 그러나 목록 항목의 무결성을 손상시키지 않으면서 목록 글머리 기호 색상을 사용자 정의할 수 있는 강력하고 유연한 방법을 제공합니다.

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