CSS만 사용하여 HTML 목록의 글머리 기호 색상을 어떻게 변경할 수 있습니까?

이미지 또는 인라인 요소 없이 HTML 목록에서 글머리 기호 색상 설정

순서가 지정되지 않은 목록의 스타일을 지정할 때 글머리 기호 색상을 변경할 수 있습니다. 목록 항목 텍스트에 영향을 주지 않고. 단순히

요소가 작동하면 텍스트 색상도 변경됩니다.

우아한 CSS 전용 솔루션

답은 ::before pseudo-element:

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

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

li::before {
  content: "•";
  color: #F00;
}

이 코드는 이미지나 인라인 요소에 의존하지 않고 원하는 효과를 얻습니다. 작동 방식은 다음과 같습니다.

list-style: none; 기본 글머리 기호를 제거합니다.
• ::before는 각
• 앞에 위치하는 의사 요소를 생성합니다. item.
• content: "•"는 원하는 글머리 기호를 디스크 또는 사각형으로 지정합니다.
• color: #F00; 글머리 기호의 색상을 설정합니다.
• padding-left 및 text-indent를 사용하여 목록 항목 텍스트를 들여쓰면 글머리 기호와 정렬됩니다.

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