이미지나 추가 태그 없이 HTML 목록의 글머리 기호 색상을 변경하는 방법은 무엇입니까?

이미지나 스팬 태그를 사용하지 않고 HTML 목록에서 글머리 기호 색상을 사용자 정의하는 방법

도전

list-style: square;를 사용하여 사각형 글머리 기호로 정렬되지 않은 HTML 목록을 사용자 정의할 때 문제가 발생할 수 있습니다. 글머리 기호만이 아닌 전체 목록 항목이 지정된 색상이 됩니다. 그러면 다음과 같은 질문이 생깁니다. 스프라이트 이미지나 추가 태그를 사용하지 않고 어떻게 총알 색상을 수정할 수 있을까요?

솔루션

간단하고 효과적인 솔루션 존재합니다:

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em; 
  text-indent: -.7em;
}

li::before {
  content: "• ";
  color: red; /* or any desired color */
}

이 접근 방식에서는:

• 목록 스타일: 없음; 기본 글머리 기호를 제거합니다.
• padding-left 및 text-indent는 콘텐츠 위치를 조정합니다.
• li::before는 콘텐츠 속성을 사용하여 글머리 기호를 삽입합니다. 그런 다음 색상 속성은 원하는 색상을 지정합니다.

이 기술을 사용하면 추가 요소나 이미지 없이 HTML 목록의 글머리 기호 색상을 우아하게 사용자 정의할 수 있습니다.

위 내용은 이미지나 추가 태그 없이 HTML 목록의 글머리 기호 색상을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!