HTML에서 대시 스타일 목록을 만드는 방법: 기본 글머리 기호 스타일 외에?

HTML 목록 스타일 사용자 정의: 대시를 사용하여 목록 생성

HTML에서 list-style-type 속성은 목록 항목의 글머리 기호 스타일을 지정하는 데 사용됩니다. 그러나 기본적으로 대시를 글머리 기호 문자로 지원하지 않습니다.

:before 의사 클래스 사용

대시 스타일 목록을 만드는 한 가지 방법은 :before 의사 클래스를 사용하는 것입니다. 이를 통해 각 목록 항목 앞에 콘텐츠를 삽입하고 독립적으로 스타일을 지정할 수 있습니다.

<code class="css">ul.dashed {
  list-style-type: none;
}
ul.dashed > li::before {
  content: "-";
  margin-right: 5px;
}</code>

콘텐츠 속성은 각 li 앞에 대시 "-"를 삽입하고 margin-right는 대시와 목록 사이에 약간의 공간을 제공합니다. 항목 텍스트.

텍스트 들여쓰기 활용

:before 의사 클래스를 사용하는 동안 들여쓰기된 목록 효과를 유지하려면 목록 항목에 음수 텍스트 들여쓰기를 적용할 수 있습니다.

<code class="css">ul.dashed > li {
  text-indent: -5px;
}</code>

이는 글머리 기호 스타일로 생성된 기본 들여쓰기에 대응하여 대시를 목록 항목 텍스트의 시작 부분과 정렬합니다.

일반 목록 문자 사용자 정의

일반 문자를 목록으로 사용하려면 bullet의 경우 다음과 같이 list-style-type 속성에 간단히 지정할 수 있습니다.

<code class="css">ul.generic {
  list-style-type: disc;
}

ul.square {
  list-style-type: square;
}

ul.circle {
  list-style-type: circle;
}</code>

이를 통해 다양한 글머리 기호 모양으로 목록을 만들고 필요에 따라 목록의 시각적 모양을 맞춤 설정할 수 있습니다.

위 내용은 HTML에서 대시 스타일 목록을 만드는 방법: 기본 글머리 기호 스타일 외에?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!