HTML과 CSS에서 마침표 없이 순서가 지정된 목록을 만드는 방법은 무엇입니까?

마침표 없이 순서가 지정된 목록 만들기

많은 개발자는 각 항목 뒤에 오는 전통적인 마침표나 숫자 문자 없이 순서가 지정된 목록을 만드는 방법을 찾고 있습니다. 이전에는 불가능하다고 여겨졌던 HTML과 CSS가 이제는 목록 스타일 유형과 의사 선택자의 적절한 구현을 통해 솔루션을 제공합니다.

CSS 솔루션

마침표를 제거하려면 다음 CSS 코드를 활용하세요.

ol.custom {
  list-style-type: none;
  margin-left: 0;
}

ol.custom > li {
  counter-increment: customlistcounter;
}

ol.custom > li:before {
  content: counter(customlistcounter) " ";
  font-weight: bold;
  float: left;
  width: 3em;
}

ol.custom:first-child {
  counter-reset: customlistcounter;
}

'list-style-type'을 'none'으로 설정하면 기본 글머리 기호 또는 숫자 문자가 제거됩니다. 'counter-increment'는 ':before' 의사 선택기에 표시되는 각 목록 항목에 대한 카운터를 생성합니다. 'content' 속성은 카운터 값을 목록 항목의 콘텐츠로 설정합니다. 'width' 속성을 조정하여 숫자 너비를 제어할 수 있습니다.

이전 브라우저에 대한 대체

Internet Explorer 6 및 7 브라우저의 경우 다음 CSS를 추가하여 복원하세요. 기본 목록 스타일:

ol.custom {
  *list-style-type: decimal; /* targets IE6 and IE7 only */
}

위 내용은 HTML과 CSS에서 마침표 없이 순서가 지정된 목록을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!