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

CSS를 사용하여 HTML 목록의 글머리 기호 색상 사용자 정의

HTML 목록에서 글머리 기호 모양을 사용자 정의하면 콘텐츠의 시각적 매력을 향상시킬 수 있습니다. 그러나 CSS를 사용하여 목록 항목의 색상을 설정하면 텍스트와 글머리 기호 모두에 영향을 미칩니다. 보다 세련된 솔루션을 위해 다음 접근 방식을 고려하세요.

순서가 지정되지 않은 목록(

)에 대한 새 CSS 스타일을 만듭니다. list-style: none;을 설정하여 기본 글머리 기호를 비활성화합니다.

각 목록 항목(

• )에 대해 왼쪽에 패딩을 추가하고 글머리 기호의 내용을 오프셋하기 위해 음수 텍스트 들여쓰기를 추가합니다.

  마지막으로 ::before 의사 요소를 사용하여 각 목록 항목 앞에 사용자 정의 글머리 기호를 만듭니다. 점이나 사각형 등의 내용과 색상을 독립적으로 설정할 수 있습니다.

  예:

  HTML

  • Item 1
  • Item 2
  • Item 3

  CSS

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    padding-left: 1em;
    text-indent: -0.7em;
  }
  
  li::before {
    content: "• ";
    color: red; 
  }

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