대시 목록 마커를 사용하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!