``요소를 사용하지 않고 목록 글머리 기호 색상을 사용자 정의할 수 있습니까?

범위 없이 목록 글머리 기호를 사용자 정의하는 방법

HTML에서 글머리 기호 목록은 항목을 표시하는 간결하고 정렬된 방법을 제공합니다. 그러나 기본적으로 글머리 기호 스타일은 제한되어 있으며 범위와 같은 추가 요소를 추가하지 않으면 변경할 수 없습니다.

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

예, 목록 내에 추가 마크업을 적용할 필요 없이 CSS 및 :before 의사 요소를 사용하여 글머리 기호 색상을 수정할 수 있습니다. 항목.

구현

1. 기본 글머리 기호 스타일 제거:

   li {
     list-style: none;
   }

   로그인 후 복사

2. 삽입 :사용자 정의를 표시하기 위한 의사 요소 앞 bullet:

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

   로그인 후 복사

• content: 원하는 글머리 기호 모양에 대한 유니코드 문자를 지정합니다.
• color: 총알의 크기를 설정합니다. color.
• font-size: 글머리 기호의 크기를 조정합니다.

참고: 이 방법은 최신 브라우저에서는 잘 작동하지만 그렇지 않을 수도 있습니다. 이전 IE 버전과 호환되어야 합니다.

예 HTML

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

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