CSS를 사용하여 대시 목록 마커로 HTML 목록의 스타일을 지정하는 방법은 무엇입니까?

대시 목록 마커를 사용하여 HTML 목록 스타일 지정

HTML에서 기본 목록 스타일 유형은 글머리 기호를 렌더링하는 "디스크"입니다. . 대신 대시 표시가 있는 목록을 만들려면 CSS를 사용할 수 있습니다.

한 가지 해결 방법은 text-indent 속성을 ​​사용하여 목록 항목과 내용을 들여쓰는 것입니다. :before 의사 요소의 속성을 사용하여 대시 문자를 삽입합니다.

예:

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

HTML:

<code class="html"><ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul></code>

결과:

- First
- Second
- Third

이 접근 방식을 사용하면 대시 표시를 추가하는 동안 들여쓰기 목록 효과를 유지할 수 있습니다.

일반 목록 마커:

:before 의사 요소의 content 속성을 ​​다음으로 설정하여 모든 유니코드 문자를 목록 마커로 사용할 수 있습니다. 원하는 캐릭터의 HTML 엔터티 코드. 예를 들어 별표(*)를 사용하려면 다음을 사용합니다.

<code class="css">ul > li:before {
  content: "*";
}</code>

위 내용은 CSS를 사용하여 대시 목록 마커로 HTML 목록의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!